Skip to content

Possible font subsetting optimization #191

Open
@Munter

Description

@Munter

The docs are using fontawesome for icons. But only a 2 of 705 icons are actually used of the 95-72kb font download (.woff and .woff2).

Creating an optimal subset of the font, to include only the exact icons that are in use, would cut the download down to ~680 bytes (.woff2), which is in the realm of inlineability.

I've been working with @papandreou to attempt a 100% automation of creating such subsets based on static analysis of the page. The tool is called subfont and the jekyll based static generation approach that the docs are taking should fit well with the static analysis approach.

Would you be interested in a PR that adds subfont to your tool chain? It would be a bit more work than just plugging it at the end because of the multiple file references in _headers, sw.js, appcache and so on, but I think it should be doable.

Some highlights from our initial experiments:

lodash.com without scripts

lodash/index.html: 1 font (1 variant) in use, 77.2 kB total. Created subsets: 680 B total
  FontAwesome:
    400 : 3/705 codepoints used, 77.2 kB (woff2) => 680 B (woff2)
Total savings: 76.5 kB

We are hanging out in https://gitter.im/assetgraph/assetgraph if you are interested to have a chat about it

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions