Skip to content

Latest commit

 

History

History
61 lines (39 loc) · 3.32 KB

CONTRIBUTING.md

File metadata and controls

61 lines (39 loc) · 3.32 KB
Raw

Contributing

Building locally

Tip

NodeJS 20 or higher is required.

To build the package locally, simply install all dependencies:

npm ci

then run the build script:

npm run build

Test App

Building the package will also output in a small test application in the test_app/ directory, which can be used to observe the layout shift between fallback and normal font.

Directory structure

build/

This directory contains the scripts used to build the package. They takes care of:

  • Generating all woff2 files from the input tff
  • Automatically generating @font faces rules for all fallback fonts
  • Generating the output scss and css files.

fallback_fonts/

This directory contains all TrueType Fonts, that can be used as a fallback. These fonts are not included in the output and are just used to calculate the override values (size-adjust, ascent-override, descent-override and line-gap-override).

Note

Fonts in this directory should be "web-safe" (generally available locally on most people's (> 70%) systems)

fonts/

This directory contains all fonts that should be built. Each font has a subdirectory and must includes the following five files:

  • normal.ttf: The variable font in the normal style
  • italic.ttf: The variable font in the italic style
  • static/normal.ttf: The static font in the normal style and regular weight (is only used to calculate the overrides of the fallback font)
  • static/italic.ttf: The static font in the italic style and regular weight (is only used to calculate the overrides of the fallback font)
  • config.json: The configuration for the font. Includes an object, which has to have the following properties:
    Key Example Description
    weight 200 900 Value to set for font-weight in the @font-face at-rule
    fallbackFontFamily Trebuchet MS Name of the fallback font family to use. " Italic" is automatically appended for the italic style. See the fallback_fonts/-directory for possible values.

index.scss

This file includes all the logic to generate the output scss and css files. It is copied to the dist directory and loads all build-specific values (included fonts configured weight, styles and unicode ranges) from the _build_info_.scss, which is autogenerated during build.

unicode_ranges.json

This JSON file includes all unicode ranges, that should be built. It's contains a simple object with the key being the name and the value being a valid unicode range.