This document provides code snippets and instructions for working with and implementing fonts, including overrides and font faces. It includes examples and implementations of font variables and font styles.

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?) 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>;

Updating and implementing fonts

Where this element can be seen?

Fonts can be seen throughout the entire application, as they define the appearance of each character on the page!

How should this element be designed?

Developers should only receive fonts used in designs. Otherwise, they will include unused fonts onto a page and they will never be used. This will affect the page performance. The developer will blame you for that.

The page should not have many font faces loaded. 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:

You can use the Figma text styles feature (How to use text styles?) in order to quickly glance over all used fonts (if you of course have configured and used this feature), or you can use the Font Fascia plugin to list all used fonts throughout the project.

<aside> ℹ️ Usually, styling this element takes from-to: 2-4h

</aside>

How the design may look like?

Fonts can be visible in the typography section.

Design example #1

Design example #2

How to develop styles for this element?

Import a new font into the application to match your theme, and create SCSS variables for using that font.

<aside> ➡️ Important: never ever should the same font-face but different weights are different font families!

</aside>

You need to add your fonts in the /src/style/fonts directory (just simply copy the font files in here, rename them if appropriate), then you will need to define your font faces in /src/style/base/_font.scss:

@font-face { // Medium
    font-family: 'Recoleta';
    src: URL(../fonts/Recoleta-Medium.woff2) format('woff2'),
        URL(../fonts/Recoleta-Medium.woff) format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

Note that we have given 2 sources because .woff2 fonts might not always work, and so it’s better to have a fallback.

Make sure not to give a different font-family name to a different weight of the same font!

The correct way to add a differently weighted font in the same family:

@font-face { // Bold
    font-family: 'Recoleta';
    src: URL(../fonts/Recoleta-Bold.woff2) format('woff2'),
        URL(../fonts/Recoleta-Bold.woff) format('woff');
    font-weight: 700;
}

This way, you’ll be able to just simply change the font-weight property to 700, and the font from the Recoleta-Bold.woff2 file would be used!

You should also define some variables to be able to refer to the same font across the project.

Here, the value of the variable must be the name of the font face. In this case, it will be 'Recoleta', as we have named our font: font-family: 'Recoleta' above.

It’s also a good idea to provide a fallback font family here.

How the implementation may look like?

Implementation Example #1

Implementation Example #2