font-display support

[knuklus]

To get points on google PageSpeed Insights, you need to add the font-display: swap property. In order not to enter it manually.

[alexlii1971]

it seems an Know-how, but how and where should I input please?

[knuklus]

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Montserrat Thin'), local('Montserrat-Thin'),
       url('../fonts/montserrat-v14-latin_cyrillic-ext-100.woff2') format('woff2'), 
       url('../fonts/montserrat-v14-latin_cyrillic-ext-100.woff') format('woff'); 
}

[deenamo]

Just to note, Google Fonts supports this natively with &display=swap query param: https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,700i&display=swap

This param is currently applied by default when getting an embed code from Google Fonts UI.

[davidcalhoun]

For more context, the font-display property helps with the Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) on page load, and that's why it's recommended by PageSpeed Insights.

[nextgenthemes]

Hi guys, I created a download tool in PHP that works on the server and as a CLI script. It supports display=swap. See nextgenthemes.com/google-webfont-downloader/