metalsmith-subsetfonts
v0.1.4
Published
Subset your webfonts to only use glyphs actually used by your website
Downloads
1
Maintainers
Readme
Metalsmith Subset Fonts
Cut down page load times in your metalsmith site by subsetting fonts loaded through the Google Fonts API
This plugin scans all HTML files and finds every character you've used across all pages (i.e. the subset of all characters used on your website). It then inserts this into URL references to the Google Fonts API.
As the plugin needs to scan HTML files, and modifies CSS files, you should run it later in the buildchain after these files have been built.
At this stage the plugin only modifies Google Fonts imported using an @import
declaration within a stylesheet.
Installation
$ npm install --save metalsmith-subsetfonts
Example
Lets say your entire website consists of the text 'Hello World!', and you're importing Open Sans regular using an @import
declaration in your stylesheet.
Before:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
After:
@import url(https://fonts.googleapis.com/css?text=HWdelor!&family=Open+Sans);
More on subsetting Google Fonts: