fontoptim
v0.2.0
Published
Generates CSS with WOFF(2) fonts embedded as Base64
Downloads
11
Maintainers
Readme
fontoptim
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.
Installation
npm install --save fontoptim
Example
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: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.
Build systems
Grunt
Resources
- Better webfont loading with using localStorage and providing WOFF2 support
- Font Squirrel’s webfont generator
Changelog
The changelog can be found in the Changelog.md file.
Author
License
The MIT License, see the included License.md file.