Using and serving Google fonts from your local server

I one project in my company we were blocked by the Google Fonts CDN because one internal script was making a request each time it generated a PDF, so we decided to download the fonts to our own server.

In this post, I explain to you how to do it.

We have this import in the CSS file that was used by the internal script.

// Fonts
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,700i');

To put the required fonts in local you can use the open source google-webfonts-helper project.

Go to the project website, select this font with the variations required in your project

Copy the generated CSS to your CSS file. Be careful to customize the relative folder were you put your fonts. We have this folder structure:

• assets
  • css
    • our-css-file.css
  • fonts
    • font1.ttf
    • font1.woff
    • font1.woff2
    • …

so the “../fonts/” folder prefix is correct.

Download the fonts and unzip it in the “fonts” folder

Compile the Sass or other style sheet language you are using if you are using one.

Now you are serving the fonts from your local server.

Tip. Enable HTTP/2 if your server supports it.