LocalStorage Fonts
Convers Google fonts and locale font files into JSON.
Original source: http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage.
Install
git clone https://github.com/electricg/localstorage-font.git
cd localstorage-font
npm install
Configure
config.json:
{
"google": [
{
"name": "Rubik",
"display": "swap"
},
{
"name": "Lato",
"formats": ["300", "300i", "400"]
}
],
"local": [
{
"name": "Digory",
"file": "digory.woff",
"weight": "700",
"style": "italic",
"display": "fallback"
}
]
}
Properties:
google
- settings for the Google Fonts files. It's alwayswoff
format at the moment. It's value is an array of fonts:name
- name of the font, spaces are allowed, using Google namesformats
- array of formats for said font, using Google label, where400
usually is regular,700
is bold,400i
is regular italic,700i
is bold italicdisplay
- indicate thefont-display
value to use when creating the css
local
- settings for local files that must be put in the folder of this module. It's value is an array of fonts:name
- indicate the name to give to the fontfile
- filename, must include extensionweight
- indicate the weight of the font ( bold | normal | 100 | 200... 900)style
- indicate the style of the font (italic | normal)display
- indicate thefont-display
value to use when creating the css
The generated CSS font-family names created have automatically a FF
(followed by a space) prefix added to the name indicated in the config, as to make sure that the CSS will use these generate fonts and not system fonts.
Run
npm start
It will create a file with the format ff-fonts${md5}.json
and it will output in the terminal the value of md5
.