You are likely here because of Google lighthouse or pagespeed telling you that you need to use "font-display: swap;". You can of course add swap to your own CSS, but for the Google fonts you need to do something else. Here you need to add the &display=swap query parameter to your link element for your google fonts. An example of this can be seen below:
<link rel="stylesheet" type="text/css"
href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400&display=swap" />
That is all there is to it, the font-face within the CSS returned will now have "font-display: swap;":
/* latin */
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7lXff4jvw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
If you are also having problems with preloading, you can check my post on this here. I hope you found this post helpful, please let me know what you think in the comments down below!