Static CSS for Google fonts and serving them from your own website (and not from gstatic CDN)

Question

Instead of using a remote Google Font CSS:

<link href="https://fonts.googleapis.com/css2?family=FontName&display=swap" rel="stylesheet">

I'd like to have everything locally. I remember that just downloading this CSS file and inserting it in my CSS is not ok because the CSS file will actually be different if you download it from a desktop, mobile, etc. It will adapt the font format on the browser (WOFF, TTF, etc.)

Question: what would be an equivalent of:

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-fCZM.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;
}

working on all browsers, with local storing of the font files?

Do we have to include woff2, ttf, etc. - in which order? What's the standard about this?

Papeterie

Answer 1

TTF should be enough, but WOFF(2) could save load time where supported.

@font-face {
  font-family: 'font';
  src: url('/font.eot');
  src: url('/font.eot#iefix') format('embedded-opentype'),
       url('/font.woff2') format('woff2'),
       url('/font.woff') format('woff'),
       url('/font.ttf') format('truetype'),
       url('/font.svg#font') format('svg');
}

Pease

Answer 2

google-webfonts-helper

I strongly recommend majodev's google-webfonts-helper:

This tool helps in retrieving all font files (woff2, woff, ttf etc.) and will also generate the css @font-face rules.

• woff2 is preferred due to its advanced file compression (brotli).
• woff – well, second best
• ttf (truetype) is rather a fallback (ie and waffle makers)

The generated @font-face output might look something like this:

/* merriweather-regular - latin-ext_latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/merriweather-v28-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/merriweather-v28-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Often missing – font display/fallback options

  font-display: fallback;

or

  font-display: swap;

These properties can actually slightly improve page speed benchmark values (pagespeed insights: "Ensure text remains visible during webfont load" ) by defining a loading policy preferring a fast initial font display (like "C'mon it's more important to show the text than waiting for this bloated font file on my slow mobile network connection!" exaggerated, but approximately what swap/fallback options do). MDN: font-display

Better delete 'local' references.
Actually a neat idea – quite a lot of people might already have locally installed common web fonts like 'Open Sans'.
Unfortunately this local referencing by font family names has caused some issues – locally available fonts weren't displayed on a web page.

External font sources (google fonts, cdns) and European GDPR
Worth mentioning – if you are working for clients in europe it is strongly recommended to avoid cdn/externally retrieved font files (and other assets).
It is not per se forbidden – but you can simplify your work to setup a proper data protection policy copy.

BTW: You can safely ditch the rather deprecated .eot and .svg files/rules. (eot were only used by ie, svg fonts work only in safari – the waffle makers' font support could be better ...).

Cultivator