Font Object

This documentation for fontkit is created and provided by the Typogram team. It’s a third-party documentation intended to delve deeper into the fontkit API. For the most accurate information, refer to fontkit’s official documentation.

The Font object is central to Fontkit. It represents a font in your system or a font file.

Properties (Read-only)

font.postscriptName:

  • Description: The PostScript name of the font. This is a unique identifier, often used in CSS and other contexts.

  • Type: String

font.fullName:

  • Description: The full name of the font, typically including its weight or style.

  • Type: String

font.familyName:

  • Description: The name of the font family to which this font belongs.

  • Type: String

font.subfamilyName:

  • Description: The specific style or weight of the font within its family (e.g., "Bold" or "Italic").

  • Type: String

font.copyright:

  • Description: The copyright statement associated with the font.

  • Type: String

font.version:

  • Description: The version string of the font.

  • Type: String


font.numGlyphs:

  • Description: The total number of glyphs in the font.

  • Type: Number

font.characterSet:

  • Description: A set of all Unicode characters covered by the font.

  • Type: Set of Numbers

font.availableFeatures:

  • Description: A list of OpenType feature tags available in the font.

  • Type: Array of Strings


font.unitsPerEm:

  • Description: The number of font units per em. It's a foundational metric for a font, often set to values like 1000 or 2048.

  • Type: Number

font.ascent:

  • Description: The font's ascent, which is the distance from the baseline to the top of the font's bounding box.

  • Type: Number

font.descent:

  • Description: The font's descent, which is the distance from the baseline to the bottom of the font's bounding box.

  • Type: Number

font.capHeight:

  • Description: The height of capital letters from the baseline.

  • Type: Number

font.xHeight:

  • Description: The height of lowercase letters, specifically the height of the letter 'x'.

  • Type: Number

font.lineGap:

  • Description: The recommended line gap or spacing between lines of text for this font.

  • Type: Number

font.underlinePosition:

  • Description: The position of the underline relative to the baseline.

  • Type: Number

font.underlineThickness:

  • Description: The thickness of the underline.

  • Type: Number

font.italicAngle:

  • Description: The angle (in degrees) of the italic slant. Upright fonts have an italic angle of 0.

  • Type: Number

font.bbox:

  • Description: The font's bounding box, which encompasses all glyphs in the font. It's an object with minX, minY, maxX, and maxY properties.

  • Type: Object


font.variationAxes:

  • Description: Information about variable font axes if the font is a variable font. Each axis has properties like tag, name, min, default, and max.

  • Type: Array of Objects

font.namedVariations:

  • Description: Named instances for variable fonts, such as predefined width or weight variations.

  • Type: Object


font._cmapProcessor:

  • Description: An internal processor for the font's character map. Typically used internally by Fontkit.

  • Type: Object

font._layoutEngine:

  • Description: An internal engine for glyph layout. Typically used internally by Fontkit.

  • Type: Object

font._variationProcessor:

  • Description: An internal processor for handling font variations. Typically used internally by Fontkit.

  • Type: Object

Other Properties

Basic properties:

Font tables as properties:

Methods:

font.createSubset():

  • Description: Creates a Subset object, allowing you to create a new font containing only specified glyphs.

  • Returns: Subset object for further operations.

font.getAvailableFeatures():

  • Description: Lists the OpenType layout features available in the font.

  • Returns: Array of available feature tags.

font.getFont():

  • Description: If the font file contains multiple fonts, retrieves a specific one.

  • Parameters: Index or specific criteria for font selection.

  • Returns: Font object.

font.getGlyph():

  • Description: Retrieves a glyph by its ID.

  • Parameters: Glyph ID.

  • Returns: Corresponding Glyph object.

font.getVariation(variation):

  • Description: Returns a new Font object for the given variation.

  • Parameters: Variation criteria or name.

  • Returns: Variation data.

font.getVariation(variation):

  • Description: Returns a new Font object for the given variation. This method is used to obtain a specific variation of the font based on the provided variation criteria.

  • Parameters: variation (Object) - An object specifying the variation criteria. The format of this object includes key-value pairs representing the variation axes. For example, { "wght": 400 } sets the weight of the font to 400.

  • Returns: Fontkit Font Object - A new font object that represents the specified variation of the original font.

Example:

let currentVariation = {
    "wght": 400
};
fkFont = fkFont.getVariation(currentVariation);

font.glyphForCodePoint(codePoint):

  • Description: Returns a Glyph object for a given Unicode code point.

  • Parameters: Unicode code point.

  • Returns: Corresponding Glyph object.

font.glyphsForString(string):

  • Description: Returns an array of Glyph objects for a given string.

  • Parameters: A string of characters.

  • Returns: Array of Glyph objects.

font.hasGlyphForCodePoint(codePoint):

  • Description: Checks if the font has a glyph for the given Unicode code point.

  • Parameters: Unicode code point.

  • Returns: Boolean indicating presence of the glyph.

font.layout(text, features, script, language):

  • Description: This is used to lay out a string of text, returning a GlyphRun object. The features parameter is optional and can be used to turn on or off OpenType features. The script and language parameters can be used to set the script and language for shaping.

  • Parameters: A string of characters, and potentially additional layout parameters.

  • Returns: GlyphRun object.

font.getName():

  • Description: Retrieves the human-readable name for a specific name ID in the font.

  • Parameters: Name ID.

  • Returns: String representing the name.

font.setDefaultLanguage():

  • Description: Sets the default language for the font, affecting layout operations.

  • Parameters: Language tag.

  • Returns: Void (changes are applied to the Font object).

font.stringsForGlyph():

  • Description: Retrieves strings that map to a specific glyph.

  • Parameters: Glyph ID or Glyph object.

  • Returns: Array of strings.

font._decodeDirectory():

  • Description: (Internal) Decodes the directory structure of the font, which is a key part of its binary data.

  • Parameters: Typically involves references or offsets from the font file.

  • Returns: Decoded directory structure.

font._decodeTable():

  • Description: (Internal) Decodes a specific table from the font's binary data.

  • Parameters: Table references or names from the font file.

  • Returns: Decoded table data.

font._getBaseGlyph():

  • Description: (Internal) Retrieves the base glyph for a particular character or code point.

  • Parameters: Usually a character or code point.

  • Returns: Corresponding base Glyph object.

font._getTable():

  • Description: (Internal) Fetches a specific table from the font.

  • Parameters: Table name or reference.

  • Returns: Table data.

font._getTableStream():

  • Description: (Internal) Retrieves a stream for reading a specific table from the font's binary data.

  • Parameters: Table name or reference.

  • Returns: Data stream for the specified table.

Layout a String and Access Glyphs:

const run = font.layout('Hello, Fontkit!');

// Iterate over each glyph in the GlyphRun to put together pathData
let pathData = '';
let x = 0;
let y = 0;
run.glyphs.forEach((glyph, index) => {
  console.log(`Glyph ID: ${glyph.id}, Unicode: ${String.fromCodePoint(...glyph.codePoints)}`);
  const position = run.positions[index];
  if (glyph.path) {
    pathData += glyph.path
      .scale(1, -1)
      .translate(x + position.xOffset, y + position.yOffset)
      .toSVG();
    x += position.xAdvance;
    y += position.yAdvance;
  }
});
console.log(pathData);

Last updated