🔤
Fontkit
GithubTypogram
  • Welcome
  • Quick Start
  • Reference
    • API Reference Index
    • Fontkit Object
    • Font Object
    • GlyphRun Object
    • Glyph Object
    • Path Object
    • Subset Object
Powered by GitBook
On this page
  • Installation
  • Load a font
  • Layout a line of text
  • Get pathData of a GlyphRun

Was this helpful?

Edit on GitHub

Quick Start

PreviousWelcomeNextAPI Reference Index

Last updated 1 year ago

Was this helpful?

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

Installation

Install via NPM:

npm install fontkit

Load a font

import * as fontkit from 'fontkit';

async function loadFont(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const buf = new Uint8Array(arrayBuffer);
  const font = fontkit.create(buf);
  console.log(font)
}
var fontkit = require('fontkit');

// open a font synchronously
var font = fontkit.openSync('font.ttf');

Layout a line of text

const run = font.layout('Hello World!');
const run = font.layout('Hello World!', {
  dlig: true,
  swsh: false,
  pcap: false
});

Get pathData of a GlyphRun

let pathData = '';
let x = 0;
let y = 0;
run.glyphs.forEach((glyph, index) => {
  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);
fontkit
Typogram
fontkit’s official documentation