1. Products
  2.   Font
  3.   JavaScript
  4.   Fontkit
 
  

Free JavaScript Library to Load, Optimize & Convert Fonts

Open Source JavaScript Font Engine allows to handle font manipulation, Text Layout & Rendering, glyph path extraction, Font Subsetting and optimization via JavaScript API.

In the world of typography, choosing the right font can significantly impact the visual appeal and overall user experience of any design project. To streamline font handling and enhance creative possibilities, developers and designers mostly rely on robust libraries and tools. Fontkit, an open source library that has emerged as a game-changer in the field and offers an extensive range of features as well as has gained popularity for its extensive font management capabilities and ease of integration.

Fontkit provides a powerful open source API that helps software developers and designers with a comprehensive set of tools to handle fonts programmatically. There are several useful features part of the API such as advanced glyph substitution, glyph path extraction, reading glyph metrics, laying out glyphs, color emoji glyphs, font subsetting, kerning support, getting glyph vector paths and converting them to SVG paths, creating a new font, character to glyph mapping support and many more.

Fontkit has included support for various popular Font file formats such as TrueType (.ttf), OpenType (.otf), WOFF, WOFF2, TrueType Collection (.ttc), and Datafork TrueType (.dfont) font files. It is designed to work seamlessly across different platforms and environments. Whether you're developing web, desktop, or mobile applications, Fontkit provides consistent performance and compatibility. Its extensive functionalities, flexibility, and platform compatibility make it an indispensable tool for typography-related tasks and an invaluable tool for software developers which will save time, effort, and headaches.

Previous Next

Getting Started with Fontkit

The recommended way to use Fontkit is using npm. Please use the following command to add the Fontkit library in your project smoothly.

Install Fontkit via npm

 npm install fontkit 

You can also install it manually; download the latest release files directly from GitHub repository.

Glyph Access and Manipulation

By using the free Fontkit API, Software developers can access individual glyphs within a font and perform manipulations such as scaling, rotating, or even combining them to create custom typography effects. The API has provided valuable methods to retrieve the total number of glyphs and obtain detailed information about each glyph, including its Unicode code point, name, bounding box dimensions, and more. This functionality is useful for examining the character coverage of a font and ensuring that it supports the required characters for a given language or writing system.

How to Access and Render Glyph via JavaScript API?

export default class GlyphPosition {
  constructor(xAdvance = 0, yAdvance = 0, xOffset = 0, yOffset = 0) {
    /**
     * The amount to move the virtual pen in the X direction after rendering this glyph.
     * @type {number}
     */
    this.xAdvance = xAdvance;

    /**
     * The amount to move the virtual pen in the Y direction after rendering this glyph.
     * @type {number}
     */
    this.yAdvance = yAdvance;

    /**
     * The offset from the pen position in the X direction at which to render this glyph.
     * @type {number}
     */
    this.xOffset = xOffset;

    /**
     * The offset from the pen position in the Y direction at which to render this glyph.
     * @type {number}
     */
    this.yOffset = yOffset;
  }
}

Text Layout and Rendering via JavaScript

The open source Fontkit API has provided complete support for advanced text layout and rendering capabilities inside JavaScript applications. Software developers can leverage its features to handle complex text layouts, multilingual typography, and sophisticated rendering algorithms, delivering exceptional results across platforms and devices. The API supports glyph shaping capabilities, kerning and letter spacing, text measurement, anti-aliasing and hinting, font caching and many more. It’s robust text layout and rendering capabilities make it a powerful tool for developers working with typography.

Manage Font Analysis & Metadata via JS API

The open source Fontkit library offers powerful font analysis capabilities, enabling developers to explore and extract vital information from font files. It provides a comprehensive set of tools to analyze fonts, including retrieving metadata such as font family, weight, style, and supported character sets. This information is invaluable for font selection and text layout decisions. It also includes validation mechanisms to check the integrity and correctness of font files. It can detect and report potential issues, such as missing or malformed tables, incompatible font formats, or font-specific errors.