In-Depth Guide on hosting local Fonts on WordPress
What is Web Fonts?
- Web fonts are fonts that do not come pre-installed on the device, and need to be downloaded via the user's browser before being displayed. Some examples of web fonts include Google's Open Sans and Roboto font in addition to the popular Proxima Nova font from Adobe Fonts.
Hosting Local Fonts vs 3rd Party
Benefits of local fonts
1. Larger Fonts Selection
One of the major benefits that local fonts offer is the fact that you can access a much wider choice in terms of fonts! While 3rd party service providers like Google Fonts and Adobe Fonts provide a vast library of fonts, they no way compare to the premium font stores which you can purchase every premium web font that you'd like to host on your site. We actually will be using an official font for our tutorial below which cannot be obtained from any third-party service.
2. Could Integrate Better
Due to the wider selection of fonts available, local hosting could enable the user to pick a font which is more compatible with the branding you have chosen to ensure consistency across your site. It all comes down to the design preferences and needs.
3. Don't Have to Rely upon 3rd Party Services
When you host fonts locally, you don't have to depend on 3rd parties and their server. The services like Adobe Fonts (previously Typekit) have been known to go down, which then, results in making your site look unprofessional. Having fewer dependencies on your WordPress website is always more efficient.
When https://t.co/Kde0okKlP0 is down the web stops working #customfontssuck #3rdpartyjs
-Mark (@markhealey) November 17, 2015 Mark (@markhealey) November 17 17, 2015
4. Full Control Over Caching
5. More Requests = faster load Times
6. One HTTP/2 Connection
Disadvantages of Local Fonts
We've now discussed the advantages of using local fonts locally but there are some disadvantages to be aware of.
1. Google Font Could Be Cached Already
Google Fonts uses their own CDN which is very fast, because it's Google at the end of the day. Because so many websites already use Google Fonts, it could very well be that the user already has the font in their cache in their browser. If you select a unique, premium font, it could actually speed up download speeds. In the case of, say, when someone visits a website using the Roboto font, which is available on Google Fonts, it will save into the cache. If they later access your website which also uses Roboto then the font will not need to be downloaded yet. But if you are using a newly released premium font like Proxima Soft, it will almost certainly require download in order to delay loading times.
One of the main points here is that, if you're planning to utilize an expensive font not commonly used, you should probably count on that person's browser needing to download it when it first visits your website. Note: If you use the most popular Google font, and you host it locally, like Roboto, this doesn't apply as the browser is smart enough to find it in the cache (whether it's loading via Google or locally on your site).
2. More complex
It is true that not every person is WordPress expert. Hosting local fonts definitely takes a little more configuration. In the example above the WordPress theme may utilize Google Fonts automatically in their theme and if you host fonts locally you will need to discover a method to disable them from being used on your website. This could entail asking the theme's developer to request a quick line of code. It might seem complicated, but we will try to explain it as easy as it can be in the guide below.
3. You should be more careful about font Choices
If you are using a third provider, it's virtually impossible to mess it up because they're providing a variety of support for browsers out of the box. When hosting locally, you have to be more careful about the type of font you select.
4. Don't Do it Without CDN
How can I host Local Fonts in WordPress
It's now time to get the exciting part! Hosting your local fonts in WordPress. Two different alternatives below. The first is using a premium font that we purchased, and another is using an existing Google font and hosting the font locally. In this guide, we have a new WordPress install , with Twenty Seventeen as the Twenty Seventeen theme installed.
1. How to Host Premium Fonts Locally
To host a high-quality font locally, we chose to choose Fontspring as well as the brand new Proxima Soft font released in January 2017. Proxima Nova Soft, created by Mark Simonson, is a more recent version of the Proxima Nova font. We picked Fontspring since they do not require any third-party tracking scripts as well as the Fontspring is an one-time purchase that is able to be used across a multitude of sites. Take care when looking for fonts, as many need third party tracking software, which in some degree is against the point of hosting them locally.
We bought the Proxima Soft Regular and the Proxima Soft Bold fonts. Generally a regular font type and bold are sufficient for most sites. If your website isn't as popular there is a possibility to get an italics version and semi-bold. Note: We don't have any affiliations with Fontspring We simply believe Fontspring offers premium fonts and licenses right!
Do you want to know what we did to increase our visitors by 1000 per cent?
Join the 20,000+ who receive our newsletter every week with insider WordPress tricks!
Step 1.
When you have purchased your fonts, you'll receive an email with links to your fonts files.
Step 2
Each font version that is available, including regular and bold will come with distinct fonts, like WOFF2, WOFF TTF, WOFF2, etc. In this case this example, we'll just be using the WOFF and WOFF2 versions for regular and bold, to ensure well-rounded browser compatibility.
Step 3
We take the font files and upload them using FTP on our WordPress website into the folder that we named "fonts." This instance, we're making use of the CDN for all of our assets, along with the no-cost CDN Enabler plugin from the team over at KeyCDN. This plugin will automatically copy the fonts we just uploaded onto our CDN. While we they are hosted locally, a CDN does not mean that you are not referencing the local assets. Importantly, you're serving all of your assets from one address, and not linking to different domains (hosts).
Step 4.
It is necessary to reference your new fonts within CSS for your WordPress website. Many themes come with an individual CSS panel, or you can use an open-source plugin such as Simple Custom CSS or JS. In this case, we will add the following code and refer to the CDN URL.
@font-face
font-family: 'proxima_softregular';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
@font-face
font-family: 'proxima_softbold';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
Also, you will need change your style to point to the new font family. Below is an example the style we applied to the Twenty Seventeen theme.
body font-family: 'proxima_softregular', Arial, sans-serif;
h1,h2,h3,h4,h5,h6 font-family:'proxima_softbold', Arial, sans-serif;This is an example from the Simple Custom CSS and JS plugin.
Step 5
In the event that your WordPress theme has Google Fonts already integrated into it, you will want to disable the Google Fonts. In the event that you do not, you could be loading your local fonts and the Google Fonts. As we're using this theme, the Twenty Seventeen theme in this guide, we are using the no-cost disabling Google Fonts plugin. It only works with the default themes of WordPress. In the majority of themes, you will probably have to contact the theme's developer, and they'll quickly provide a function to deactivate Google fonts. Or check their documentation, generally, this is a simple change. There are some themes that offer an option to turn the theme off or on in the backend.
And that's it! This is a screen shot of our brand new Proxima Soft font loading for the body font and headers on The Twenty Seventeen theme.
Here is a screen shot of our HTTP requests. You can see that there are only two requests for the WOFF2 fonts, instead of the four requests from Google that were shown earlier. The WOFF fonts are available also on the website however, since Chrome is able to support WOFF2, these are pulled instead. If we went to the site using IE 11 for example, the WOFF fonts would be loaded instead.
2. How to host Google Fonts Locally
The other method to host fonts local is to choose a font you like from Google Fonts and transfer it to your server or CDN. Open Sans is known to be very lightweight and super speedy. We will therefore be using that for our test.
Step 1.
The best way to grab the Google Fonts is to use the free google-webfonts-helper tool, which we are using for this tutorial. You might also want to look into our Font Face Observer project. First thing you have to do is look to find the Google Font you want, and select the styles. Then, we select the standard and large (700) styles of the font.
Step 2
In the next step, you'll be required to select which browser support you want. The most modern browsers offer the WOFF and WOFF2 Fonts and that's what we need. A good support package includes WOFF, WOFF2 TTF, SVG, and. It gives you the code which you are able to copy onto your clipboard, as well as the download zip containing the fonts.
The rest of the instructions follow the same format as our premium fonts example above.
Step 3.
The fonts are downloaded and then upload them through FTP our WordPress site to a folder we created called "fonts." This case, we're making use of a CDN for all of our assets. This is in addition to the no-cost CDN enabler plug-in provided by the team at KeyCDN. The plugin copies automatically the fonts that we have transferred onto our CDN. Although we claim to host them locally the CDN is still referencing the local assets. It is crucial to note that you are serving all your assets from the same place, and not using several hosts (hosts).
Step 4
You will the need to reference your new fonts using CSS in your WordPress website. Many themes come with the ability to customize CSS panels nowadays as well as a free plugin like Simple Custom CSS or JS. The following code will be added to the code to reference the CDN URL.
/* open-sans-regular - latin */
@font-face
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
/* open-sans-700 - latin */
@font-face
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
You will also need modify your designs in order to show the latest font family. This is an example of the code we used on our Twenty Seventeen theme.
body font-family: 'Open Sans', Arial, sans-serif;
h1,h2,h3,h4,h5,h6 font-family:'Open Sans', Arial, sans-serif;Here is a screenshot of this plugin: Simple Custom CSS and JS plugin.
Step 5
If you're WordPress theme contains Google Fonts already integrated into it, then you'll need to disable them. It might be ironic, since we are employing Google fonts. The reason to do this is to stop external requests. Because we're making use of the Twenty Seventeen theme in this video, we use the free disable Google Fonts plugin. It only works with the default themes of WordPress. In the majority of themes it is likely that you have to contact the developer and they can quickly provide a function to deactivate Google fonts. Also, check out their documentation. usually this is a simple change. There are some themes that offer an option to turn them off or on at the backend.
And that's it! This is a screen shot of our latest Google Open Sans font loading to our body font as well as headers on our Twenty Seventeen theme.
And here is a screenshot of our request. It is evident that there are only two requests for WOFF2 fonts instead of Google's 4 requests which were shown earlier. We have the WOFF fonts in the site too however, since Chrome is able to support WOFF2, they are loaded instead. If we went to the website using IE 11 for example, WOFF's fonts would have been taken over.
Summary
We'd like to hear the details of your configuration. Do you use a third company service to load your web fonts ? Have already tried hosting locally?
Reduce time, money and maximize site performance with:
- Instant help assistance from WordPress hosting experts, 24/7.
- Cloudflare Enterprise integration.
- Global audience reach with 35 data centers across the globe.
- Optimization through the built-in Application Performance Monitoring.