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.
This plugin requires Grunt 0.4.
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-fontoptim --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-fontoptim');Run this task with the grunt fontoptim command.
Task targets, files and options may be specified according to the grunt Configuring tasks guide.
Your font should be in WOFF and WOFF2 formats (you can make them with Font Squirrel’s webfont generator).
Bold variants should contain bold in file names and italics should contain italic.
dest defines a prefix of destination files, eg. with dest of build/ptserif two files will be created: build/ptserif.woff.css and build/ptserif.woff2.css.
Type: String, default: target name (eg. ptserif).
Font-family that you can use to refer to your font in CSS, eg. PT Serif.
fontoptim: {
ptserif: {
src: 'fonts/PTSerif-*',
dest: 'build/ptserif',
options: {
fontFamily: 'PT Serif'
}
}
}Then load these CSS files with loadFont function or with your own code.
<!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 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.
