GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → sapegin → Fontoptim

sapegin / Fontoptim

Licence: mit
Generates CSS with WOFF(2) fonts embedded as Base64

Labels

html

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].