How to get rid of an artifact with a connected font when loading a site?

Question

css

A problem arose during the layout process, namely: after connecting new fonts ( Inter and Golos-Text ), artifacts appear when rendering the page. That is, within a fraction of a second after refreshing the page, I see the base font (Segoe UI), and then it changes to the one I applied (Inter).

This is what css looks like before including new fonts

body {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.58;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  text-size-adjust: 100%;
  text-rendering: optimizeSpeed;
  ...
}

Further, at the very beginning of the CSS document, I write the font-face rule, as a result, the final CSS looks something like this.

css

@font-face {
  font-weight: 400;
  font-family: 'Inter';
  font-style: normal;
  src:
    url(../fonts/inter/Inter-Regular.woff2?v=3.15) format("woff2"),
    url(../fonts/inter/Inter-Regular.woff?v=3.15) format("woff2");
  font-display: swap;
}

body {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.58;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  text-size-adjust: 100%;
  text-rendering: optimizeSpeed;
  ...
}

I will be grateful if you tell me how to get rid of the artifact, and also share your tips.

PS Additional question: where is it better to add font-face : in css document or in html > head > style?

Answer 1

experiment with font-display https://developer.mozilla.org/ru/docs/Web/CSS/@fon...
swap - it does just that it loads any font it can, and then replaces it with the one you need