1. Products
  2.   Font
  3.   JavaScript
  4.   Typr.js

Free JavaScript Library for Parsing & Rendering Fonts

Open source JavaScript Font Processing Library that supports Parsing and Rendering of TrueType as well as OpenType Fonts Directly in the Browser.

In the realm of web & software development, typography plays a crucial role in shaping the overall user experience. To manipulate and render fonts efficiently, developers rely on robust libraries that simplify the process. One such library is Typr.js, a powerful JavaScript library specifically designed for font parsing and rendering. It is designed to be lightweight, allowing for quick integration into web projects. The library supports all major web browsers, including Chrome, Firefox, Safari, and Edge. This ensures consistent font rendering across different platforms and devices.

Typr.js is a powerful open source JavaScript library that provides software developers with a lightweight and versatile solution for working with various types of font files. It enables the parsing and rendering of TrueType and OpenType fonts directly in the browser, eliminating the need for server-side processing. This makes Typr.js an invaluable tool for web designers and developers looking to optimize typography on their websites. The library fully supports the implementation of accessibility features, such as text scaling, letter spacing adjustments, and custom font loading, catering to users with varying needs and many more.

Typr.js is very easy to handle and can be used in a variety of web applications, ranging from simple text rendering to more complex typography-related projects. It supports simplifying features like loading and managing fonts on web pages, analyzing and extracting various metrics from fonts, effortlessly manipulating and styling text online, support for internationalization and localization, advanced typography, and many more. Its rich feature set, lightweight nature, and cross-browser compatibility make it an invaluable tool for enhancing typography on the web.

Previous Next

Getting Started with Typr.js

The recommended way to install Typr.js is using npm. Please use the following command to add the maven dependency in your project.

Install Typr.js via npm

 npm install @fredli74/typr --save-dev

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

Font Loading and Management via JavaScript API

The open source Typr.js has provided complete support for loading and managing fonts inside JavaScript applications. It simplifies the process of loading and managing fonts on web pages. It supports various font formats, including TrueType (TTF), OpenType (OTF), and Web Open Font Format (WOFF), allowing developers to seamlessly integrate custom fonts into their projects. By providing a convenient font management interface, Typr.js enables developers to efficiently control font loading and prioritize font subsets to optimize performance.

Add SVG Table Parser for SVG Color Font Parsing

Typr.SVG = {};
Typr.SVG.parse = function(data, offset, length)
  var bin = Typr._bin;
  var obj = { entries: []};

  var offset0 = offset;

  var tableVersion = bin.readUshort(data, offset);  offset += 2;
  var svgDocIndexOffset = bin.readUint(data, offset);  offset += 4;
  var reserved = bin.readUint(data, offset); offset += 4;

  offset = svgDocIndexOffset + offset0;

  var numEntries = bin.readUshort(data, offset);  offset += 2;

  for(var i=0; i < numEntries ; i++)
    var startGlyphID = bin.readUshort(data, offset);  offset += 2;
    var endGlyphID = bin.readUshort(data, offset);  offset += 2;
    var svgDocOffset = bin.readUint(data, offset);  offset += 4;
    var svgDocLength = bin.readUint(data, offset); offset += 4;

    var svg = bin.readASCII(data, offset0 + svgDocOffset + svgDocIndexOffset, svgDocLength);

    for(var f=startGlyphID; f<=endGlyphID; f++){
      obj.entries[f] = svg;

  return obj;


Apply Text Formatting & Styling via JavaScript API

The open source Typr.js library makes it easy for software developers to apply various types of text formatting inside JavaScript applications. With Typr.js, developers can effortlessly manipulate and style text on web pages. It provides an extensive range of text layout functions, such as line breaking, text justification, and hyphenation, allowing for precise control over how text is presented. Additionally, the library supports a wide array of text styling options, including letter spacing, word spacing, and text decoration, enabling developers to create visually appealing and readable text.

Apply Text Formatting and Styling inside JavaScript Apps

// Assume that Typr.js library is already loaded

// Define the target element where the text will be formatted and styled
const targetElement = document.getElementById('myTextElement');

// Load and parse the font file using Typr.js
Typr.loadFont('path/to/font.ttf', (font) => {
  // Font loading is complete
  // Apply the loaded font to the target element
  targetElement.style.fontFamily = font.name.fontFamily;

  // Set text content for the target element
  targetElement.textContent = 'Hello, Typr.js!';

  // Apply text styling
  targetElement.style.fontSize = '24px';
  targetElement.style.letterSpacing = '2px';
  targetElement.style.wordSpacing = '4px';
  targetElement.style.textDecoration = 'underline';

  // Additional text layout adjustments
  targetElement.style.textAlign = 'center';
  targetElement.style.lineHeight = '1.5';
  targetElement.style.textJustify = 'inter-word';

Kerning and Ligatures via JavaScript API

Typr.js allows software developers to take advantage of advanced typographic features, such as kerning and ligatures, to enhance the visual appeal of text. Kerning adjusts the spacing between specific pairs of characters to improve overall readability, while ligatures replace sequences of characters with visually pleasing alternatives. By leveraging these features, developers can achieve more refined and harmonious typography on the web.