woff2base64

Generates CSS with woff2 and woff fonts embedded as Base64

Usage no npm install needed!

<script type="module">
  import woff2base64 from 'https://cdn.skypack.dev/woff2base64';
</script>

README

woff2base64

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

Build Status

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

License

Released under the MIT license.

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