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).
;;const fonts = 'Roboto-Bold.woff2': fs 'Roboto-Bold.woff': fs // ...;const options = fontFamily: 'Roboto';const css = ;// 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;fs;
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 weight: 'bold' style: 'italic' 'Roboto-Bold.woff2': content: fs weight: 'bold' style: 'normal' 'Roboto-Regular.woff2': fs;
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.