Skip to content
Generates CSS with WOFF(2) fonts embedded as Base64
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Webfont optimizer for Grunt

Powered by You 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.

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-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


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.



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>
	<meta charset="utf-8">
	<!-- 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">

See demo for details.



The changelog can be found in the file.


The MIT License, see the included file.

You can’t perform that action at this time.