Serve Google Fonts Locally

Self-host Google webfonts on your server instead of linking from Google.

Setup

  1. Go to: https://gwfh.mranftl.com/fonts and select your font and faces required.
  2. Unzip the font files and in the fonts folder – should only need woff and woff2 formats
  3. Select Modern and copy the CSS to the top of your stylesheet
  4. Add font-display: swap; to the line below the font-weight for each face
  5. Use local as a src with the (exact) font name – browser will use first if user has it installed and won’t need to download

Example Font Declaration

@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/open-sans/open-sans-v35-latin-300.woff2') format('woff2');
}

Preload Fonts (optional)

Preload font files to load quicker if required. Add the following line in <head> for each face:

<link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin>