Browser support

[pwichmann]

You state...

Fontkit is an advanced font engine for Node and the browser

...but you don't offer an explanation (for the less well-versed among us) how Fontkit can be used for the browser environment. It'd be amazing if you could add a few lines about how one would do that (i.e. without node.js).

I would expect something like a *.js file that I could embed in an HTML file. But it's probably not that easy...

Many thanks! This is a super helpful library.

[imkamil]

Can anyone help?

[Pomax]

You can bundle it for use in the browser using browserify, webpack, or other tools that can take commonjs code as input to produce browser-loadble ES5/ES6 code.

[adamdyson]

I was just searching to do the same thing, some documentation on this subject would be nice.

[defue]

Anyone managed to produce browser-loadable code? Could someone share instructions on how to do it?
I am trying to browserify it and get the below error:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0) while parsing file: /home/user/fontkit/node_modules/fontkit/src/TTFFont.js

[twardoch]

https://fontkit-demo.now.sh/
https://github.com/devongovett/fontkit-demo

https://agsek.github.io/monoto-fonts-ofl/
https://github.com/agsek/monoto-fonts-ofl

[defue]

@twardoch, thanks a lot for the links!

[indolering]

Browsers are finally starting to support ES6 module loading natively. How about an additional rollup config that resolves all of the CommonJS modules and handles misc Babel transforms?

[indolering]

I just submitted a pull request that adds a build for browsers via Browserify. This is less than ideal: Browserify adds to the size and doesn't support ES6 syntax. I think the "only" major dependency on Node is Buffer and Stream. Browsers have a slightly different implementation of buffers but a subset of the API is shared with Node.

[Pomax]

@indolering only in webkit/blink for the forseeable future, unfortunately.

[indolering]

@Pomax The PR request I submitted transpiles to ES5 and UMD.

[bkstorm]

Hey guy, how to use this library without using module loader like requirejs, commonjs, webpack, ....
I mean just native js.

[mirrec]

I have extracted code from @twardoch post. Thanks for that!
This load font in the browser. Hope it will help.

const loadBlob = (blob) => {
  blobToBuffer(blob, (err, buffer) => {
    if (err) {
      throw err;
    }

    let font = fontkit.create(buffer)
    console.log(font)
    // do something with font
  })
}

fetch('link-to-your-font.woff').then(res => res.blob()).then(loadBlob, console.error)

[mrdoob]

Indeed... It would be great if you could include standalone js es5/es6 files in the releases section.

[Pomax]

A small note on today's JS landscape: everything except legacy browsers (which is only a single browser right now; IE11) support ES6 at this point, so an ES5 release wouldn't make a whole lot of sense anymore.

That's more something that people who still need to support legacy browsers can quite easily effect themselves by running their code through a transpiler after bundling, rather than having individual libraries do this beforehand.

[mrdoob]

Sounds good. Standalone ES6 fontkit.module.js file then? 🤔

[moffsugita]

can't ? it is only server side only??

[moffsugita]

#41

[moffsugita]

README says "Fontkit is an advanced font engine for Node and the browser, used by PDFKit. "
but, can't.

code

var fontkit = require('fontkit');
const image = require(`./fonts/fonts/Open_Sans/OpenSans-Regular.ttf`);
fontkit.openSync(image, {
  family: 'Open Sans',
});

Error in browser

TypeError: fs.readFileSync is not a function
(anonymous function)
node_modules/unicode-properties/index.js:6
  3 | UnicodeTrie = require('unicode-trie');
  4 | data = require('./data.json');
  5 | fs = require('fs');
> 6 | trie = new UnicodeTrie(fs.readFileSync(__dirname + '/data.trie'));
  7 | 
  8 | log2 = Math.log2 || function (n) {
  9 |   return Math.log(n) / Math.LN2;
View compiled
./node_modules/unicode-properties/index.js
http://localhost:3000/static/js/1.chunk.js:127338:30

[alimoosavi15]

README says "Fontkit is an advanced font engine for Node and the browser, used by PDFKit. "
but, can't.

code

var fontkit = require('fontkit');
const image = require(`./fonts/fonts/Open_Sans/OpenSans-Regular.ttf`);
fontkit.openSync(image, {
  family: 'Open Sans',
});

Error in browser

TypeError: fs.readFileSync is not a function
(anonymous function)
node_modules/unicode-properties/index.js:6
  3 | UnicodeTrie = require('unicode-trie');
  4 | data = require('./data.json');
  5 | fs = require('fs');
> 6 | trie = new UnicodeTrie(fs.readFileSync(__dirname + '/data.trie'));
  7 | 
  8 | log2 = Math.log2 || function (n) {
  9 |   return Math.log(n) / Math.LN2;
View compiled
./node_modules/unicode-properties/index.js
http://localhost:3000/static/js/1.chunk.js:127338:30

I'm getting the same error. Did you find the solution?

[mearns]

I'm trying to bundle this using webpack. I'm not clear on the differences between webpack and browserify, but the issue with webpack seems to be the fs.readFileSync calls, as noted in the previous two comments. I'm curious how browserify is able to handle this, but more to the point, I'm looking for a way to do this with webpack.

[mearns]

I just put in a PR (#185) to get around the readFileSync issue, which I think will allow this to work in webpack.

[nmassi]

README says "Fontkit is an advanced font engine for Node and the browser, used by PDFKit. "
but, can't.

code

var fontkit = require('fontkit');
const image = require(`./fonts/fonts/Open_Sans/OpenSans-Regular.ttf`);
fontkit.openSync(image, {
  family: 'Open Sans',
});

Error in browser

TypeError: fs.readFileSync is not a function
(anonymous function)
node_modules/unicode-properties/index.js:6
  3 | UnicodeTrie = require('unicode-trie');
  4 | data = require('./data.json');
  5 | fs = require('fs');
> 6 | trie = new UnicodeTrie(fs.readFileSync(__dirname + '/data.trie'));
  7 | 
  8 | log2 = Math.log2 || function (n) {
  9 |   return Math.log(n) / Math.LN2;
View compiled
./node_modules/unicode-properties/index.js
http://localhost:3000/static/js/1.chunk.js:127338:30

I think I solved this by importing 'fontkit/base' instead of 'fontkit' but I don't found any documentation about this.

[opcodewriter]

Can someone please show a simple example how to get a browser build out of the fontkit repo?

It's 2021 (almost) and ES9 is supported in a every modern browser, so many of the concerns related to JS should not be an issue anymore.

[domsson]

Just scanned through the comments and still not sure how to use this with a plain browser + vanilla JS setup. Any tutorials out there that would guide me through the process step by step?

[bennlich]

Looks like the docs for this project are a little better: https://github.com/opentypejs/opentype.js

But also this comment links to several examples that use fontkit in the browser: #77 (comment)

[tushuhei]

This fork might be helpful to use on a browser.
https://github.com/Hopding/fontkit

[BaGsn]

This library is the only one (as far as I know) with the ability to read variable font tables from WOFF2 files. I tried to bundle it with browserify but I bumbed into the same issues when I tried to use the result (TypeError: fs.readFileSync is not a function).
It would be great if someone with the knowledge could export a browser build.

[Pomax]

@BaGsn does the above fork not work for you?

[Pomax]

@Hopding I noticed your fork doesn't have issues enabled - that does make it a bit harder to recommend new PRs to merge in =)

(and suggest updates that won't ever happen here, as this project is effectively abandoned, near as I can figure. For instance, Node has had native brotli support for quite a while now, voiding the need for brotli.js)

[luke-robertson]

bumping to 2022

[devongovett]

Sorry but what is missing at this point? I did a lot of work on this recently. Here's a demo using fontkit in the browser with no build step. Is something else broken for you? https://codepen.io/devongovett/pen/JjpVMKZ

[phil-r]

Hey @devongovett! I don't think your link works

[Pomax]

If esm.sh is the quasi-official CDN for fontkit, it might be good to copy that example into the README.md as browser example so folks won't need to hunt for it.

[devongovett]

Something must have changed with the way esm.sh works, because it worked when I wrote that codepen and I haven't changed anything. Sigh. I updated the pen to use the bundled mode, which seems to work.

I wouldn't say there's an "official" CDN for fontkit. Really, I'd recommend hosting it yourself, or bundling it into your application. That way you never get weird breakages like the above.

[devongovett]

Going to close this because I think it is working now. If you have further problems, please open a separate issue for that.

[Typogram]

Sorry but what is missing at this point? I did a lot of work on this recently. Here's a demo using fontkit in the browser with no build step. Is something else broken for you? https://codepen.io/devongovett/pen/JjpVMKZ

Your code works, thank you @devongovett!
In your working codepen example, you use:

import * as fontkit from 'https://esm.sh/fontkit?bundle';

/* esm.sh - fontkit@2.0.2 */
export * from "https://esm.sh/v106/fontkit@2.0.2/es2022/fontkit.bundle.js";

But I don't see a fontkit.bundle.js in the build script or dist folder. How can I build fontkit.bundle.js from the source code?

[jamj2000]

Sorry but what is missing at this point? I did a lot of work on this recently. Here's a demo using fontkit in the browser with no build step. Is something else broken for you? https://codepen.io/devongovett/pen/JjpVMKZ

Your code works, thank you @devongovett! In your working codepen example, you use:

import * as fontkit from 'https://esm.sh/fontkit?bundle';

/* esm.sh - fontkit@2.0.2 */
export * from "https://esm.sh/v106/fontkit@2.0.2/es2022/fontkit.bundle.js";

But I don't see a fontkit.bundle.js in the build script or dist folder. How can I build fontkit.bundle.js from the source code?

Follow de link.

https://esm.sh/v113/fontkit@2.0.2/es2022/fontkit.bundle.mjs