Generates CSS with WOFF(2) fonts embedded as Base64
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
lib
test
.editorconfig
.gitignore
.jscs.json
.jshintrc
.npmignore
.travis.yml
Changelog.md
Contributing.md
License.md
Readme.md
index.js
package.json

Readme.md

fontoptim

Build Status

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

Changelog

The changelog can be found in the Changelog.md file.

Author


License

The MIT License, see the included License.md file.