grunt-fontoptim
v0.1.1
Published
Generates CSS with WOFF(2) fonts embedded as Base64
Downloads
13
Maintainers
sapeginReadme
Webfont optimizer for Grunt
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.
Getting Started
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-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-fontoptim');Fontoptim task
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.
Options
fontFamily
Type: String, default: target name (eg. ptserif).
Font-family that you can use to refer to your font in CSS, eg. PT Serif.
Usage Examples
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.
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.
License
The MIT License, see the included License.md file.