Glyphance

This is a CLI utility that help reduce load times and bytes by splitting typography files into smaller chunks for different alphabets automatically without the tears.

🌈 Features

Configurable.
Config driven.
Docker image, no install required.

🚀 Quickstart

Lets assume we want to use 2 variable fonts, one of which has an italic version still as a separate file. Also on our webserver we serve our static fonts from /fonts/.

Get the font files
Write a little config file glyphance.yaml and define the font-families (Mulish and FireCode e.g.) and their files or variations.
Run it.
Use the generate font files and CSS.

example/
├── FiraCode-VariableFont_wght.ttf
├── Mulish-Italic-VariableFont_wght.ttf
├── Mulish-VariableFont_wght.ttf
└── glyphance.yaml

# glyphance.yaml
fonts:
  'Mulish':
    - file: Mulish-VariableFont_wght.ttf
      variable: true
      css:
        font-weight: 200 1000
    - file: Mulish-Italic-VariableFont_wght.ttf
      variable: true
      css:
        font-weight: 200 1000
        font-style: italic
  'FireCode':
    - file: FiraCode-VariableFont_wght.ttf
      variable: true
      css:
        font-weight: 300 700

output:
  prefix: /fonts/

Run

docker run -v $(pwd)/example:/data glyphance

Enjoy

Now you can use the generated font files and the generated/fonts.css.

example/
├── FiraCode-VariableFont_wght.ttf
├── Mulish-Italic-VariableFont_wght.ttf
├── Mulish-VariableFont_wght.ttf
├── generated
│   ├── 08284d4f696ab68dc7aa21c9c061c534939a3a0c.woff2
│   ├── ...
│   ├── ...
│   ├── f8d95e7f048e130c09015a20689693461cc0dedb.woff2
│   └── fonts.css
└── glyphance.yaml

💡 Inspiration

The idea came mostly at how google fonts subsets their typefaces on Google Fonts. They split the fonts into multiple blocks of unicode chars, and leverage the unicode-range property of @font-face to only deliver the parts of a font that are needed for a website, drastically reducing bytes sent over the wire. Under the hood it uses the amazing fonttools to do the heavy lifting.

📖 API & Documentation

Config file reference can be found under docs/config.

Example

fonts:
  'My Font Familiy':
    - file: ./path/relative/to/config/file.ttf|otf|...
      variable: true # Whether ist's a variable font or not, defaults to false
      css:
        font-style: italic # Custom css properties to be added to the css

output:
  dir: foo # Directory of the output
  prefix: /static/fonts # Prefix to be added to the src URL in the CSS
  clean: true # Whether to clean to output directory first
  css:
    font-weight: 400 # CSS to added to each @font-face. By defaults includes swap, normal weight and style

3.0 KiB Raw Blame History