Skip to main content

Font Preloading

When you load a shop, you might notice that the text is shown using a different font for a second until the "real" font is displayed, and you might notice a "flash" or "glitch" when the font changes. This is called Flash of Unstyled Text (FOUT).

In order to mitigate this issue with custom fonts we add to our projects, we should do font preloading.

To do that there are few steps you need to do.

Add fonts to the project​

Add your font files to shop/resources/fonts folder.

Import fonts​

Import your fonts by adding @font-face rule to the shop/resources/scss/base/global/font-face.scss file, e.g.:

@font-face {
    font-family: 'CustomFont';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('~shop/resources/fonts/CustomFont.woff2') format('woff2');
}

Import font file in the shop/client/index.tsx file in the following way:

import 'shop/resources/fonts/CustomFont.woff2';

Enable font preloading​

In RenderService located in shop/server/api/services/render folder enable font preloading:

export class RenderService extends BaseService {
    private readonly renderHelper = new RenderHelper({ fonts: { preload: true } });
}

The last step is to include font preload links in the head of the page. To the shop/server/template/index.twig file add:

    {{ assets.fonts }}