Generates CSS with WOFF(2) fonts embedded as Base64. Use these CSS to load webfonts asynchronously, avoid invisible text and reduce flickering.
Based on ideas from Adam Beres-Deak’s article Better webfont loading with using localStorage and providing WOFF2 support.
npm install --save fontoptim
You need WOFF and WOFF2 font files to use fontoptim (you can make them with Font Squirrel’s webfont generator):
var fs = require('fs');
var fontoptim = require('fontoptim');
var fonts = {
'PTSerif-Bold.woff': fs.readFileSync('fonts/PTSerif-Bold.woff'),
'PTSerif-Bold.woff2': fs.readFileSync('fonts/PTSerif-Bold.woff2'),
'PTSerif-Italic.woff': fs.readFileSync('fonts/PTSerif-Italic.woff'),
// ...
};
var css = fontoptim(fonts, {fontFamily: 'PT Serif'});
// css.woff = '@font-face{font-family:"PT Serif";src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAU...'
// css.woff2 = '@font-face{font-family:"PT Serif";src:url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAA...'
fs.writeFileSync('build/ptserif.woff.css', css.woff);
fs.writeFileSync('build/ptserif.woff2.css', css.woff2);Then load these CSS files with loadFont function.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- This script must be placed in the HEAD above all external stylesheet declarations (link[rel=stylesheet]) -->
<script>function loadFont(fontName, fontUrlBase) { /* Inline loadFont function here */ }
loadFont('PT Serif','/build/ptserif')</script>
<link rel="stylesheet" href="/build/styles.css">
</head>
...See demo folder for details.
- Better webfont loading with using localStorage and providing WOFF2 support
- Font Squirrel’s webfont generator
The changelog can be found in the Changelog.md file.
The MIT License, see the included License.md file.