woff2base64

Generates CSS font-face with woff2 and woff fonts embedded as base64.

Installation

npm install --save woff2base64

Usage

woff2base64 automatically looks up the font-weight and font-style in the given font filename (case-insensitive). All possible css values are supported.

If your font's filename contains the word regular, the font-weight will be set to normal.

However, if you cannot change the font's filename, you can pass the weight and style for each font via the font parameter (see below).

import fs from 'fs';
import woff2base64 from 'woff2base64';
const fonts = {
    'Roboto-Bold.woff2': fs.readFileSync('fonts/Roboto/Roboto-Bold.woff2'),
    'Roboto-Bold.woff':  fs.readFileSync('fonts/Roboto/Roboto-Bold.woff'),
    // ...
};
const options = {
    fontFamily: 'Roboto'
};
const css = woff2base64(fonts, options);
// css.woff2 = '@font-face{font-family:"Roboto";src:url(data:application/font-woff2;charset=utf-8;base64,...'
// css.woff  = '@font-face{font-family:"Roboto";src:url(data:application/font-woff;charset=utf-8;base64,...'
 
fs.writeFileSync('build/roboto.woff2.css', css.woff2);
fs.writeFileSync('build/roboto.woff.css', css.woff);

Parameters

woff2base64 accepts two objects: fonts and options.

fonts (required)

Use woff2 and woff filenames as keys.

The value can either be a String containing the file content, a Buffer containing the file content or an Object, allowing you to pass font-specific options:

const fonts = {
    'Roboto-BoldItalic.woff2': {
        content: fs.readFileSync('fonts/Roboto/Roboto-BoldItalic.woff2'),
        weight: 'bold',
        style: 'italic'
    },
    'Roboto-Bold.woff2': {
        content: fs.readFileSync('fonts/Roboto/Roboto-Bold.woff2'),
        weight: 'bold',
        style: 'normal'
    },
    'Roboto-Regular.woff2': fs.readFileSync('fonts/Roboto/Roboto-Bold.woff2'),
};

Options

fontFamily (required)

The name of the Font Family used in css.

Type: String

fontFaceTemplate

The Template used to generate the css. Used with Lodash's _.template.

Type: String

Default:

@font-face{ font-family:"<%=family%>";src:url(<%=uri%>) format("<%=format%>");font-weight:<%=weight%>;font-style:<%=style%>;}

fontUriTemplate

The Template used to generate the base64 encoded data uri. Used with Lodash's _.template.

Type: String

Default:

data:<%=mime%>;charset=utf-8;base64,<%=base64%>

banner

A banner that gets prepended to generated css files. Set to '' to disable banner.

Type: String

Resources

• Convert your ttf fonts to woff2 and woff with Font Squirrel’s Webfont Generator.

• See the current browser support for woff2 and woff fonts on canisue.com.

• Why would you need this? Read Better webfont loading with using localStorage and providing WOFF2 support by Adam Beres-Deak.

• This package is based on fontoptim by Artem Sapegin with improvements for font-style and font-weight recognition.

License

Released under the MIT license.

Copyright (c) 2017 Marcel Fetten. All rights reserved.