Comments (37)
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.
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 buildfontkit.bundle.js
from the source code?
Follow de link.
https://esm.sh/v113/[email protected]/es2022/fontkit.bundle.mjs
from fontkit.
Related Issues (20)
- Modify and save/write a font HOT 1
- font.layout crashing on esoteric unicode character
- Implementation question: availableFeatures HOT 1
- Support glyph path fill rule (non-zero winding / even-odd crossing / etc)
- Handle avar table version 2
- Exntend font.layout accept Array of Glyphs and return a GlyphRun? HOT 1
- .getImageForSize(100) returns "null" using "Apple Color Emoji.ttc" HOT 2
- when i use fontkit to genetate the subset of ttf file,but can not open the subset file,shows βnot a valid font fileβ HOT 3
- [Performance] WOFF font format for CJK languages is 5x slower in Chrome and Unresponsive in Firefox HOT 1
- seac-like endchar compatibility syntax not handled HOT 1
- Cannot use Fontkit on CodeSandbox.io HOT 3
- How to extract individual TTF from a font collection (TTC) file?
- Missing initialisation for pts variable for glyphs HOT 1
- Trouble with Kerning / Letter Spacing HOT 1
- fontkit library installing on react js project while importing we have issue
- fonkit 2.0.0 create from ArrayBuffer returns empty `variationAxes` and null parameters HOT 1
- Newest version of restructure doesn't support all string encodings HOT 6
- Empty _table object
- Fontkit.Font to Buffer
- Question: How to lookup name record by nameID
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fontkit.