How to add font-display: swap; to font-face CSS from Google font API

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="//,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( 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!