Hosting Google Fonts locally on your own server will reduce total site size, DNS requests and improve load times.
Nothing slows down a WordPress website like too many external HTTP requests. Chances are your WordPress theme has built in Google Font requests that come pre-loaded by the developer. Under the right conditions hosting Google Fonts locally on your own server can reduce HTTP requests, site size and load times.
The majority of WordPress theme developers give users the ability to customize the font on their website using the Google Font open source library. If this is the case, then every time your site loads it has to download fonts from Google servers. Although Google has fast reliable servers, they usually can’t match locally downloaded files. Fonts don’t add much to your total page size -its the extra requests (even small ones) that start adding up quickly.
Google Fonts are flagged in all of the major page speed testing services like GTMetrix, Pingdom ,WebPageTest and Google Page Speed Insights – reducing your scores and load times. I use WebPageTest.org for all page speed optimization projects since it allows testing on different servers, browsers and (mobile) devices.
Table Of Contents
The following steps are specifically designed to work with Google Fonts although this process will work with most fonts. I avoid plugins like the plague, but if you choose to use a plugin to host fonts I’ll show you how to use a plugin called CAOS Webfonts | Host Google Fonts Locally.
Hosting fonts on your own server is not necessarily optimal – in fact most sites should let Google do the work. Loading fonts off of Google servers could actually improve speed (globally) depending on your specific situation.
Google loads fonts to global audiences through their own (Content Delivery Network) – you can see this by testing your site on WebPageTest and then clicking on “Performance Review“. Secondly, popular fonts like Roboto and Lato are often already cached in the viewers browser.
Testing your site through one of the many website speed tools is necessary to determine if locally loaded Google Fonts are actually making your site faster. As a general rule you should only host Google Fonts on your own server if you are already using a CDN or if you are a hyper local business.
1. Backup Your Website (UpdraftPlus)
Before doing any font optimization backup your website (I use UpdraftPlus Premium to backup this site).
My site backups are done automatically done on a weekly basis although you can select various time periods depending on how often your content is updated. If you plan on making any changes to WordPress theme defaults like CSS, Plugins or uploading files to your server its a good idea to do a manual backup.
To manually backup, navigate to WordPressMenu / Settings / UpdraftPlus and click “Backup Now“. If this is your first time installing Updraft you will have to first go to the settings page and select where the backup will be stored at. Google Drive & FTP are the best remote storage options for most people. Updraft is has a popular free version with some limitations.
2. Run An Initial Page Speed Test (Benchmark)
Run an initial test page speed test to see the quantity of fonts your wordpress theme is using, the size of the fonts and how quickly they are being loaded. Your initial score will give a pretty solid benchmark as a basis for improvement. Navigate to the “waterfall” or “details” page of your speed test.
All of the site speed services offer great insights and a “waterfall” feature. In the example above I used Pingdom and the total size of fonts being downloaded is just over 80 KB.
My site currently uses (3) Google fonts – Dancing Script-Regular, Lato-Regular and Lato-Bold. Pingdoms left column labeled “file” clearly shows the files being served.
If you are setting up fonts for the first time on your site you will need to select a font from Google Fonts open library. If your theme already comes with fonts pre-loaded you can use the same fonts, but just change where they are loaded from.
3. Download Only The Fonts Being Used
Only download the fonts you intend to use as isn’t necessary to download the entire font family. My site uses Lato regular 400 and bold 700, so there is no reason to download the italic, light,thin or medium types.
More font types and families equals more HTTP requests, larger page size and slower load times. Keeping the font count to 3-4 types should be sufficient for most websites.
Google offers a font manager tool called Skyfonts which helps keep fonts up to date. That is one of the downsides to loading fonts locally vs through Google API. Automatic font updates are not available when you host them off your own server.
Google will probably download the entire font family regardless of what you select (until that bug is fixed) via a font family .zip file.
4. Convert .TTF To .W0FF .WOFF2
In the next step we will be converting the TrueType Font .TTF we downloaded from Google to web font format (Web Open Font Format 1.0 & Web Open Font Format 2.0). There are several conversion tools available but ill be using Font Converter to do this.
Web Open Font Format is available in version 1.0 & 2.0. Version 2.0 offers better compression over version 1.0 so be sure to convert to .WOFF and .WOFF2
You can’t upload the ZIP folder directly to the conversion tool. You first have to unzip the file from Google and then select each font.
Be sure to select .WOFF, .WOFF2 conversion formats. Then select the option to include HTML/CSS – we will use this later to add the font(s) to our CSS file. Lastly check the box to confirm legal permission and click “Convert Your Font”
5. Download Converted Font Files
After clicking convert your font you will be redirected to a page where you should get a “Conversion Successful” message. The download should start automatically – if it doesn’t you can start it manually by clicking “Start Download”.
The files being downloaded are again in zip and will have to be unzipped before being uploaded to your server.
6. Upload Font Files To Your Server
After downloading and unzipping your fonts you will need to upload them to your own server. You can do this with an FTP program like Filezilla or the simply using Cpanel.
To prevent theme and wordpress updates from overriding the changes made you will need to upload your files to your wp-content/uploads folder. Alternatively, you could create a separate folder for fonts instead of uploading to your root directory.
7. Test The Font In WordPress Or Browser
Test all of your font file paths to make sure they are setup correct. You can do this by copy and pasting them into your browser. A successful url path will result in the given font downloading in your browser.
- https://your-website-here.com/wp-content/uploads/Lato-Regular.woff
- https://your-website-here.com/wp-content/uploads/Lato-Regular.woff2
- https://your-website-here.com/wp-content/uploads/Lato-Bold.woff
- https://your-website-here.com/wp-content/uploads/Lato-Bold.woff2
- https://your-website-here.com/wp-content/uploads/DancingScript.woff
- https://your-website-here.com/wp-content/uploads/DancingScript.woff2
https://your-website-here.com should be replaced with your own website address. If you aren’t currently using SSL you will need to take the (s) off behind http
- http://your-website-here.com
- https://your-website-here.com
- http://www.your-website-here.com
- https://www.your-website-here.com
You should also make sure you are using the preferred version of your website address to avoid redirects.
8. Default Font Settings
If your theme has a built in option for downloading Google Fonts you will need to adjust those settings. My wordpress theme has an Advanced Options/Typography page built in where I simply checked the “Disable Google Fonts” box.
You may need to browse through your themes built in options or consult the author for instructions on how to disable fonts from being loaded from Google. Settings will vary based on the company or author who created the theme.
9. Edit Your CSS (Style.css)
@font-face {
font-family: ‘Dancing Script’,Arial, sans-serif;
src: url(‘https://titanwp.com/wp-content/uploads/DancingScript-Regular.woff2’) format(‘woff2’),
url(‘https://your-domain-name-here.com/wp-content/uploads/your-font-name-here’) format(‘woff’);
}
The final step is adding the file paths to your CSS. Ideally you want to load fonts by editing the main Style.css file although some wordpress themes discourage this. During theme updates the main style.css file can get overwritten causing you to lose customizations.
Thankfully theme developers have added places for you to change CSS options without fear of them being overwritten through childthemes and custom.css
Important: WOFF2 files are referenced in your CSS files using the “@font-face”
10. Use Font Fallbacks For Timeouts Or Errors
In the rare case that your font cannot be rendered all major browsers (except Safari) have what is called a fallback font feature. If your font cannot load in <3 seconds a common font like Times or Arial will be loaded by default. You can test this by purposely entering the wrong file path in the previous step.
The “swap” feature means if the font does eventually load after 3 seconds it will be swapped for the default font.
| BROWSER | USAGE | TIMEOUT | FALLBACK | SWAP |
| Chrome | 64% | 3 seconds | Yes | Yes |
| Safari | 13% | No Timeout | N/A | N/A |
| Firefox | 6% | 3 seconds | Yes | Yes |
| Internet Explorer | 6% | 0 seconds | Yes | Yes |
| Opera | 3% | 3 seconds | Yes | Yes |
11. Retest Your Website Against Benchmark
The last step is just a matter of re-testing your site on one of the major page speed optimization sites. GTMetrix offers a good option for measuring results.
The following criteria should improve (decrease):
- Fully Loaded Time (Seconds) – Decreased Full Loaded Time by 14% (.20 seconds)
- Total Page Size (Bytes) – Decreased Total Page Size 33% (80 KB)
- Amount of HTTP Requests (Number) – Decreased By 25% (5 Requests)
Loading fonts locally may only shave a fraction of a second off during loads, but this is amplified for mobile loading as cell phone networks can be stubbornly slow at times. According to my analytics 52% of my traffic comes from mobile sources so keeping load times close to 1 second is very important.
12. CAOS for Webfonts Plugin Installation
Although I am against the use of plugins for relatively simple implementations its understandable that new users may not be able to do the manual font method. Thankfully, a few user friendly plugins exist to help you out – Caos for Webfonts and Host Google Fonts Locally
Download and install Caos for Webfonts via your Plugins / Add New admin dashboard shortcut. Once installed you will need to navigate to Settings / Optimize Webfonts. If it doesn’t show up right away refresh your WordPress admin dashboard.
- Search for the font family you wish to use
- Select the subsets you want
- Remove fonts from the list that you don’t need
- Click the red “Download Fonts” button
- Click the “Generate Stylesheet” button
- The stylesheet is automatically added to your header
You can also adjust other settings on the right side of the page. You can choose the path where fonts are cached from and enter the URL path to serve files from if you are using a CDN. Be sure to test your page and site speed after implementing locally hosted fonts. If you are interested in hosting other files locally (Javascript .js) Caos also makes another plugin to load Google Analytics locally.
Hosting local fonts and javascripts locally isn’t for everyone and that is why its so important to take a benchmark test before implementing these strategies. Hosting locally removes the ability of using Googles content delivery network (CDN) and may repair the Cache Validator errors given by GTMetrix testing.
I write tutorials about wordpress, speed, SEO and marketing, With over a decade of experience I’ve learned a lot and I’d like to share my knowledge with you.