Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
Munter committed Dec 9, 2017
1 parent d961133 commit 99157e6
Showing 1 changed file with 35 additions and 18 deletions.
53 changes: 35 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,41 @@ A command line tool to statically analyse your page in order to generate the mos
Speed up your time to first meaningful paint by reducing the web font payload and critical path to the font files.

Subfont will:

- Automatically figure out what characters are used from each font
- Warn you about usage of characters that don't exist as glyphs in your webfonts
- Create an exact subset of used characters of each font
- Add the font subsets to your pages with browser preload hints for reduced time to first meaningful paint
- Generate web fonts in both `woff2` and `woff` formats
- Add preload hints for the subsets to reduce time to first meaningful paint
- Add JS font loading for browsers without preload support
- Give the subsetted fonts new names and prepend them in front of the original fonts in your `font-family` definitions (enables missing glyph fallback)
- Async load your original `@font-face` declaring CSS at the bottom of your page, moving it off the critical path

![A site before and after running subfont](https://raw.githubusercontent.com/Munter/subfont/master/images/before-after.png)

Currently supported font services:

- Google fonts
- Local fonts (with [fonttools](/~https://github.com/fonttools/fonttools))

**If you know of font services with liberal font usage licenses, open an issue and we'll add support for them**


Installation
-----

Get the basic CLI tool, which supports subsetting Google Fonts and optimizing all local fonts with preloading instructions:

```
npm install -g subfont
```

If you want the ability to run font subsetting locally you'l need Python and install fonttools with this command line:

```
pip install fonttools brotli zopfli
```


Recommended usage
-----------------
Expand All @@ -47,27 +63,28 @@ Command line options
--------------------

```
$ subfont -h
$ bin/subfont -h
Create optimal font subsets from your actual font usage.
subfont [options] <htmlFile(s) | url(s)>
Options:
-h, --help Show this help [default: false]
--root Path to your web root (will be deduced from your
input files if not specified)
-o, --output Directory where results should be written to
-i, --in-place Modify HTML-files in-place. Only use on build
artifacts [default: false]
--inline-subsets Inline fonts as data-URIs inside the @font-face
declaration [default: false]
--inline-css Inline CSS that declares the @font-face for the
subset fonts [default: false]
--font-display Injects a font-display value into the @font-face
CSS. Valid values: auto, block, swap, fallback,
optional [default: "auto"]
--format Webfont format. Available options are `woff` and
`woff2` [default: "woff"]
-d, --debug Verbose insigts into font glyph detection
-h, --help Show this help [default: false]
--root Path to your web root (will be deduced from your
input files if not specified)
-o, --output Directory where results should be written to
-i, --in-place Modify HTML-files in-place. Only use on build
artifacts [default: false]
--inline-fonts Inline fonts as data-URIs inside the @font-face
declaration [default: false]
--inline-css Inline CSS that declares the @font-face for the
subset fonts [default: false]
--font-display Injects a font-display value into the @font-face
CSS. Valid values: auto, block, swap, fallback,
optional [default: "swap"]
--recursive, -r Crawl all HTML-pages linked with relative and root
relative links. This stays inside your domain
[default: true]
-d, --debug Verbose insigts into font glyph detection
[default: false]
```

Expand Down

0 comments on commit 99157e6

Please sign in to comment.