Fonts

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

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

gatsby-theme-statik package downloads and processes external fonts and embeds them on the front-end website as self-hosted resources.
SiteBox WordPress theme converts a configuration into enqueue calls that import fonts into the Gutenberg Experience.

Providers

For most scenarios, fonts are delivered to websites using platforms like Google Fonts or TypeKit. The implementation is different for each of these platforms, which is why the SiteBox framework introduced font providers.

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

Google Fonts

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

Collection

Property	Type	Value
`family`	String	The font name
`axes`	String	Custom font variables valid with the API documentation and with available font variables in the directory.

Examples

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

commons/assets/fonts/google.json

[
  {
    "family": "Red Hat Display"
  },
  {
    "family": "Open Sans",
    "axes": "wght@300;400;500"
  },
  {
    "family": "Roboto",
    "axes": "ital,wght@0,400;1,100"
  }
]

TypeKit

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

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

Collection

Property	Type	Value
`projects`	[String]	A list of TypeKit projects to embed on a website

Examples

The example below mounts all fonts associated with the project xxxxxxx

commons/assets/fonts/typekit.json

{
  "projects": ["xxxxxxx"]
}

Self-hosted Fonts

If certain fonts required by a project are not available in any font library, they can be delivered as part of the website assets.

@TBC

Fonts in stylesheets

Font configuration takes care of mounting the @font-face property without any involvement from the development team. Then, fonts can be called from any of the SCSS stylesheets in a regular way as shown in the example below. It sets Open Sans, which was included using the 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

Styles Images