...

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PT-Sans_Regular.woff2') format('woff2'),
        url('../fonts/PT-Sans_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: optionalswap;
}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PT-Sans_Bold.woff2') format('woff2'),
        url('../fonts/PT-Sans_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: optional;
}swap;
}

Another possibility for font-display is optional. It is used in some of the project, and it’s working, BUT in this case block period is extremely short (~3s). In this case, user’s connection speed might be a determining factor, where slower connections are less likely to receive custom font.

To avoid CLS while using font-display: swap; consider using fallback font: https://web.dev/articles/css-size-adjust (https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Poppins ). Example of implementation in projects: https://gitlab.creativestyle.pl/toys4fun/theme-toys4fun/-/merge_requests/343.

Change category links component mobile layout from dropdown to scrollable list

...