Fonts

-

Statik framework comes with a built-in support for fonts on both front-end and back-end. The underlying components are meant to implement all best practices to font management while its opinionated interface makes all the changes as easy as updating a shared configuration file.

Configuration files are located in commons/assets/fonts, and their content depend on which font provider the project requires. From a technical perspective, configuration files are read in:

  • gatsby-theme-statik package to download, process external fonts and embed them on the front-end website as self hosted resources,
  • Statik WordPress theme to converts a configuration into enqueue calls meant to import fonts into Gutenberg Experience.

Providers

For most of scenarios, fonts are delivered to the website using platforms like Google Fonts, or TypeKit. The implementation is different for each of them and that is the reason why Statik framework introduced font providers.

Provider is simply a set of instructions required to embed a font on both front-end and back-end from a specific font library, making the process very convinient for developers. In fact, the only work that needs to be done on a regular project basis is to select one of providers and update its configuration so it matches expected syntax. Fonts will become ready to use immediately.

Google Fonts

Google Fonts is the most popular fonts library. The framework supports v2 of the Google Fonts API only, which is explained on the web.dev/variable-fonts. To use Google Fonts, simply create commons/assets/fonts/google.json file and update it with a configuration. It should be a collection, in which each of items is a manifest for a single font implementation.

Collection

PropertyTypeValue
familyStringThe font name
axesStringCustom font variables valid with the API documentation and with available font variables in the directory.

Examples

The example below mounts Red Hat Display with a regular weight, Open Sans with 300, 400 and 500 weights and Roboto in italics (100 weight) and the regular one (400 weight).

[
  {
    "family": "Red Hat Display",
  },
  {
    "family": "Open Sans",
    "axes": "wght@300;400;500"
  },
  {
    "family": "Roboto",
    "axes": "ital,wght@0,400;1,100"
  }
]
commons/assets/fonts/google.json

TypeKit

TypeKit is another popular fonts library. Most of its configuration should be performed in a dedicated Adobe's control panel. Any fonts to be consumed by the website should be associated with a Web Project established within the external panel. More details can be found in the official documentation.

Once the project was created on TypeKit control panel, create commons/assets/fonts/typekit.json file and update it with a simple configuration that references to the project ID, which can be found on a "Web Applications" tab in TypeKit control panel.

Collection

PropertyTypeValue
projects[String]A list of TypeKit projects to embed on a website

Examples

The example below mounts all fonts associated with the project xxxxxxx

{
  "projects": ["xxxxxxx"]
}
commons/assets/fonts/typekit.json

Self-hosted Fonts

Some fonts required by projects are not exposed in any of font libraries. The solution is to deliver fonts within website assets.

@TBC

Fonts in stylesheets

Font configuration takes care about mounting @font-face property with no involvement from a development team. Then, fonts can be called from any of SCSS stylesheets in a regular way as shown on example below – It sets Open Sans, which was included using Google Fonts Provider.

body {
  font-family: "Open Sans", Helvetica, Arial, "sans-serif";
}

@TBD: Developers need to remember about setting proper font-family in front-end and back-end

  • Google Fonts: Inny font-display niz swap
  • Google Fonts: Subsety
  • Google Fonts: Predefiniowany zestaw liter
  • @todo: Przetestowac subsety w typekicie
Edit on GitHub