How to serve Google Fonts on your own Server

Posted on
How to host Google Fonts on your own Server or Webspace or Website

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.

Related Articles
Some days ago I was at a WordPress meetup in Nairobi. The topic was „Web Hosting for WordPress“. And because I run my own servers Read more
How to install Wekan, a open source & self hosted Trello alternative, on your own Ubuntu 16.04 server with ISPConfig 3.1 using Apache Reverse Proxy.
How to install ISPConfig 3.1 on Ubuntu 16.04 on a Digital Ocean Server incl. Apache as web server, Postfix as mail server, Pure FTPD as Read more
Find out how Mod_Pagespeed is working and helping to fix without the need to touch code. Mod_Pagespeed can help you to optimize Images, CSS code, Read more
Rock solid SSD Servers at DigitalOcean! Some years ago, in a YouTube video I first heard about DigitalOcean. At that time I was running my Read more

2 thoughts on “How to serve Google Fonts on your own Server

  1. I would suggest using this plugin for automating it instead which works with every theme/plugin, and supports modern features like unicode-range: https://wordpress.org/plugins/selfhost-google-fonts/

    1. Hey Asad,
      you made a plugin for that ?

Leave a Comment / What do you think?

Your email address will not be published. Required fields are marked *