How to make a web page not "twitch" when loading?

Question

css

I designed a regular web page in which I use fonts from Google Fonts. I include them via @include in the stylesheet. For example @import url(' https://fonts.googleapis.com/css?family=Roboto:300... ') .
When a web page is opened, it "jumps" due to the fact that the fonts are not loaded immediately. The fact is that when the Google font is not loaded yet, the default font is displayed. Because of this, the page twitches.
How to make sure that there is no such side effect? Thanks in advance!

Answer 1

Attach the style file in the header of the site

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/@...

Answer 3

1. Connect fonts not through Google Fonts
2. Make a preloader for the entire page, and when the page loads, remove the preloader