What is a font?

Untitled

A font is a collection of characters with a similar design. Each character is commonly referred to as a glyph.

The goal of the developer is to include a font on a page and ensure it loads quickly. Then developer must apply a font to desired elements.

What format should the fonts use?

Fonts come in a variety of formats. The most common are ttf and woff. However, for best performance, consider using the woff2 format. This format is currently only not supported in Internet Explorer, just like React, pretty much, thus, you can safely use it on projects.

<aside> ➡️ Do not have a woff2 font? Convert it using one of the following links:

The woff2 is multiple times more efficient than any other font format "on the market". Please use it under any circumstances.

What affects my font loading experience?

The fonts may be considered a render-blocking resource. This could delay the page display. In order to avoid it, the powerful font-display property is introduced. It allows controlling the way a font load on a page. The 3 font display values you will usually choose from:

<aside> ➡️ When fonts on your page blink, that is likely because the font sources fail to load in time. You can fix this by following:

How many fonts may the page have?

All elements may use different font sizes, but there should be no more than 5 font faces on a page. Here are few tips to avoid a large number of fonts loaded on a page:

<aside> ➡️ If not sure how to decrease the number of fonts on the page, please reach out to the company CTO via email ([email protected]).

</aside>

What is a font face?

A font face is a CSS declaration of a font. It declares a combination of the following properties:

An average font-face declaration may look as follows:

@font-face {
  font-family: "Open Sans", sans-serif;
	font-weight: normal;
	font-display: swap;
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

How to work with fonts?

1. Save the font in the src/style/fonts folder

Saving to the src folder will allow easier bundling of your resource. There will be no need to play with public URLs in font source declarations. What are font source declarations? Here is how to import your fonts into the project.

  1. Obtain the woff2 of your desired font. How to convert my font to woff2?
  2. Name these files to match your font family name and font-weight and font-display
  3. Save your fonts to the src/style/fonts folder of your project

2. Register a font and select a proper display

Now we need to override (How to override CSS files?) a few CSS files in order to register the newly imported fonts:

  1. Override the src/style/base/_font.scss file. Register your fonts there using the following template:

    @font-face {
    font-family: '<FONT FAMILY>';
    src: url(/style/fonts/<NAME OF A FONT FILE #1>.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: '<FONT FAMILY>';
    src: url(/style/fonts/<NAME OF A FONT FILE #2>.woff2) format('woff2');
    font-weight: bold;
    font-style: normal;
}

  2. Override the src/style/main.scss file, if not already. Copy the file from the parent (likely, ScandiPWA) theme.

  3. Override the src/style/abstract/_abstract.scss file, if not already. Copy the file from the parent (likely, ScandiPWA) theme.

  4. Override the src/style/abstract/variables file, if not already. Put the following content inside:

    @import '../../../node_modules/@scandipwa/scandipwa/src/style/abstract/variables';

$font-<FONT NAME>: '<FONT FAMILY>', <FONT FALLBACK>;

3. Apply a font to the desired elements

You can now set the following in your styles, which should change the fonts of an element:

font-family: $font-<FONT NAME>;