GithubTypogram

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:

Property
Description

.type

The type of the font, such as 'truetype', 'cff', etc.

.defaultLanguage

The default language for the font, used when retrieving names and other language-specific details.

.stream

The readable stream from which the font is being read. Useful for reading binary data directly from the font file.

.variationCoords

An object representing the coordinates for variable font instances. If the font is not variable, this property is null.

._directoryPos

(Internal) Position of the directory within the font stream. Typically used internally by Fontkit for navigation purposes.

._tables

(Internal) A cache of parsed tables. Used internally by Fontkit to store tables that have been parsed.

._glyphs

(Internal) A cache of parsed glyphs. Used internally by Fontkit to store glyphs that have been read from the font.

.directory

The font's directory table, which provides an index to the rest of the tables in the font.

Font tables as properties:

Property
Description

.GDEF

Glyph Definition Table: Contains glyph class definitions, ligature caret lists, and glyph attachment positioning.

.GPOS

Glyph Positioning Table: Contains information about positioning glyphs in complex scripts or ligature adjustments.

.GSUB

Glyph Substitution Table: Defines glyph substitutions, such as ligatures, contextual alternates, etc.

.OS/2

OS/2 and Windows Specific Table: Contains metrics, glyph index ranges, style flags, and other font metadata.

.cmap

Character to Glyph Index Mapping Table: Maps character codes to glyph indices.

.cvt

Control Value Table: Contains values used by the fpgm table and the glyf table for hinting.

.fpgm

Font Program: Contains hinting instructions for the font.

.gasp

Grid-fitting and Scan-conversion Procedure Table: Contains information for grid-fitting and anti-aliasing.

.glyf

Glyph Data Table: Contains the outlines of the glyphs in the font.

.head

Font Header Table: Contains global font information such as bounding box, version, etc.

.hhea

Horizontal Header Table: Contains horizontal metrics and settings.

.hmtx

Horizontal Metrics Table: Contains metrics for each glyph's horizontal layout.

.loca

Index to Location Table: Contains offsets to each glyph in the glyf table.

.maxp

Maximum Profile Table: Contains the maximum values for various font-wide parameters.

.name

Naming Table: Contains names for various font attributes, including designer, copyright, etc.

.post

PostScript Table: Contains information used for emulating PostScript fonts.

.prep

Control Value Program: Contains hinting instructions executed before processing any glyph in the font.

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);
PreviousFontkit ObjectNextGlyphRun Object

Last updated