FontData: fullName property

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The fullName read-only property of the FontData interface returns the full name of the font face. This is usually a human-readable name used to identify the font, e.g., "Optima Bold".

Examples include:

  • Apple SD Gothic Neo UltraLight
  • Arial Black
  • Avenir Next Heavy
  • Katari Medium Italic
  • YuMincho +36p Kana Extrabold

Value

A string.

Examples

The following snippet will query for all available fonts, and log metadata. This could be used, for example, to populate a font-picker control.

js

async function logFontData() {
  try {
    const availableFonts = await window.queryLocalFonts();
    for (const fontData of availableFonts) {
      console.log(fontData.postscriptName);
      console.log(fontData.fullName);
      console.log(fontData.family);
      console.log(fontData.style);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Specifications

Specification
Local Font Access
# ref-for-dom-fontdata-fullname

Browser compatibility

BCD tables only load in the browser