Browser support about fontkit HOT 37 CLOSED

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

from fontkit.

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

from fontkit.

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?

from fontkit.

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)

from fontkit.

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.

from fontkit.

bumping to 2022

from fontkit.

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

from fontkit.

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

from fontkit.

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

from fontkit.

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.

from fontkit.

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)

from fontkit.

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.

from fontkit.

Can anyone help?

from fontkit.

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.

from fontkit.

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

from fontkit.

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

from fontkit.

@twardoch, thanks a lot for the links!

from fontkit.

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?

from fontkit.

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.

from fontkit.

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

from fontkit.

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

from fontkit.

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

from fontkit.

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

from fontkit.

#41

from fontkit.

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?

from fontkit.

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.

from fontkit.

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

from fontkit.

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.

from fontkit.

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

from fontkit.

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.

from fontkit.

@BaGsn does the above fork not work for you?

from fontkit.

@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)

from fontkit.

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

from fontkit.

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.

from fontkit.

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

from fontkit.

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 - [email protected] */
export * from "https://esm.sh/v106/[email protected]/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?

from fontkit.

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 - [email protected] */
export * from "https://esm.sh/v106/[email protected]/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/[email protected]/es2022/fontkit.bundle.mjs

from fontkit.