How to serve Google Fonts on your own Server

Web-Developer and Designer usually take a very close look at the performance of a website. What I find in almost any WordPress template, no matter if it’s theme for free or a paid one, is the fact that the theme is loading fonts from google. Unfortunately, it has also a negative effect on your website speed.

So today I dug into this matter to see if there is a way around it. Well, there is. I will demonstrate this using the Font “Jaldi”. Just open the Google Fonts website and search for “Jaldi”. Click on the red plus icon, and then click on “1 Family Selected” at the bottom of your display.

You will find this bit of Code there:

 <link href="https://fonts.googleapis.com/css?family=Jaldi" rel="stylesheet">

And what you need is this:

https://fonts.googleapis.com/css?family=Jaldi

Just open that URL in your browser and you will find:

/* devanagari */
@font-face {
  font-family: 'Jaldi';
  font-style: normal;
  font-weight: 400;
  src: local('Jaldi'), local('Jaldi-Regular'), url(https://fonts.gstatic.com/s/jaldi/v2/-aIVAZMAl651ESMb_l27ag.woff2) format('woff2');
  unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */https://www.niih.de/serve-google-fonts-server/?preview=true
@font-face {
  font-family: 'Jaldi';
  font-style: normal;
  font-weight: 400;
  src: local('Jaldi'), local('Jaldi-Regular'), url(https://fonts.gstatic.com/s/jaldi/v2/w7BCXLA76iEFZvtnvi97ug.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jaldi';
  font-style: normal;
  font-weight: 400;
  src: local('Jaldi'), local('Jaldi-Regular'), url(https://fonts.gstatic.com/s/jaldi/v2/rHG4LRTTXyqBtS72qs_SYg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Now we have the woff2 URLS containing the font itself. Just open the urls:

https://fonts.gstatic.com/s/jaldi/v2/-aIVAZMAl651ESMb_l27ag.woff2
https://fonts.gstatic.com/s/jaldi/v2/w7BCXLA76iEFZvtnvi97ug.woff2
https://fonts.gstatic.com/s/jaldi/v2/rHG4LRTTXyqBtS72qs_SYg.woff2

in your browser and it should ask you to download the woff2 files. After the download is done, fire up your FTP client, connect to your website and upload the .woff files.

The next thing want to do is to adjust the previous code to your web directory.

/* devanagari */
@font-face {
  font-family: 'Jaldi';
  font-style: normal;
  font-weight: 400;
  src: local('Jaldi'), local('Jaldi-Regular'), url(/your/web/directoy/-aIVAZMAl651ESMb_l27ag.woff2) format('woff2');
  unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Jaldi';
  font-style: normal;
  font-weight: 400;
  src: local('Jaldi'), local('Jaldi-Regular'), url(/your/web/directoy/w7BCXLA76iEFZvtnvi97ug.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jaldi';
  font-style: normal;
  font-weight: 400;
  src: local('Jaldi'), local('Jaldi-Regular'), url(/your/web/directoy/rHG4LRTTXyqBtS72qs_SYg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

And when ever you use

font-family: 'Jaldi';

in your CSS file, the font is just there, without downloading it from google.