In-Depth Guide for hosting local fonts locally on WordPress
- What is Web Fonts?
- Hosting Local Fonts as well as 3rd Party
- How can I host Local Fonts within WordPress
What is Web Fonts?
- Web fonts are fonts that are not with the device and need to be downloaded via the user's browser before being displayed. A few 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
The benefits of fonts that are local
1. More Fonts to Choose from
One of the biggest benefits that local fonts offer is the fact that you have access to a much wider choice in terms of the fonts you can choose from! While 3rd party service providers such as Google Fonts and Adobe Fonts have a huge selection of fonts, they no match the high-end font stores where you can purchase every premium web font 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. It could be more integrated
With the greater variety of fonts available Local hosting can allow the user to pick a font which is more compatible to the design you've selected to guarantee uniformity throughout your website. All it boils down to the design preferences and needs.
3. Don't Have to Rely upon 3rd Party Services
If you host your fonts locally, you don't have to depend on 3rd parties or their servers. These services, such as Adobe Fonts (previously Typekit) are known to shut down, which then, results in making your site appear unprofessional. Having fewer dependencies on your WordPress website will always be more efficient.
https://t.co/Kde0okKlP0#customfontssuck#3rdpartyjs
November 17 17, 2015
4. Full Control Over Caching
5. More Requests = faster load Times
6. One Connection to HTTP/2
Advantages and disadvantages of Local Fonts
Now we've discussed the benefits of using local fonts locally but there are some disadvantages that you should be aware of.
1. Google Fonts Can Be Cached Already
Google Fonts uses its own CDN which is extremely speedy since they are Google and not Google. Since a lot of websites use Google Fonts, it could quite possibly be the case that the person using it already has the font in their memory in their browser. If you select a unique premium, premium font it can improve download speed. If for instance, when someone visits a website that uses the Roboto font, offered through Google Fonts, it will save into the cache. If they later access the website that 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 most likely require download for a delay in loading time.
One of the key aspects here is that should you decide to employ costly fonts that aren't commonly utilized, then you must be prepared for the browser of that user being required to download it whenever the first time they visit your site. Be aware that if you're using the most popular Google font, and you host it locally, like Roboto the rule doesn't hold as the browser is smart enough to locate it within the cache (whether it's loaded from Google or on your local site).
2. More complex
There is no doubt that not everyone is a WordPress expert. Hosting local fonts definitely takes a little more configuration. In the example above the WordPress theme can use Google Fonts automatically in their theme. If you are hosting local fonts you'll have find a way to prevent them from being used on your website. This could entail asking the designer of the theme to ask for simple lines of code. This may seem difficult, but we will try to make it as simple as possible by following the steps below.
3. It is important to be extra cautious regarding font choices
If you're working with a third party and you're using a third party, it's nearly impossible to make it work because they're providing a variety of options for support for different browsers right out of the box. If you host local, you have to be extra careful with what type of font you choose.
4. Don't do it without CDN
How do I create and host Local Fonts in WordPress
Now is the time for the exciting part! Hosting your local fonts in WordPress. Two different alternatives below. The first is using a premium font that we bought. The other is using an existing Google font, and hosting the font locally. In this guide, we are using a brand new WordPress install , with Twenty Seventeen as the Twenty Seventeen theme.
1. How do you host premium fonts Locally
To host a high-quality font locally, we chose to go with Fontspring as well as the brand new Proxima Soft font which was launched in January 2017. Proxima Nova Soft, created by Mark Simonson, is a updated variant of the Proxima Nova font. We picked Fontspring since they do not require any third-party tracking scripts in addition to the fact that Fontspring is a one-time purchase which can be used across a multitude of websites. Take care when looking for fonts, as many require third-party tracking software, which in some degree is against the point of hosting the font locally.
We bought the Proxima Soft Regular as well as the Proxima Soft Bold fonts. A regular font and bold is sufficient for the majority of websites. If your site isn't well-known, there's a chance to get an italics version and semi-bold. Note: We don't have any affiliations with Fontspring We simply believe Fontspring has premium fonts, and licenses right!
Do you want to know the steps we took to boost the number of visitors we receive by 1000 percent?
Join the 20,000+ that receive our email every week. We'll give you insider WordPress tricks!
Step 1.
After you've purchased your fonts, you'll receive an email with links to your font file.
Step 2.
Each font version that is accessible such as bold and regular will come with distinct types of fonts like WOFF2, WOFF TTF, WOFF2 as well as WOFF2. For this particular example is based on the WOFF and WOFF2 fonts for bold and regular for a well-rounded browser compatibility.
Step 3
We take the font files and upload them using FTP to our WordPress website to the directory we named "fonts." In this instance, we're making utilization of our CDN for all of our files, as well as the free CDN enabler plug-in by the folks at KeyCDN. The plugin copies the fonts we just uploaded onto our CDN. Even though they're stored locally, the fact that they are hosted on A CDN is not a guarantee that it doesn't refer to the local assets. Importantly, you're serving all your assets through one address, and not linking to different domains (hosts).
Step 4.
It is essential to refer to your brand new fonts inside CSS for your WordPress website. A lot of themes have an CSS panel that is unique, or you could use an open-source plug-in like Simple Custom CSS and JS. In this instance you will need to include 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; You will also need to alter your style towards the new font family. Here's an example of how we have applied the style on our Twenty Seventeen theme.
body font-family: 'proxima_softregular', Arial, sans-serif; h1,h2,h3,h4,h5,h6 font-family:'proxima_softbold', Arial, sans-serif;The following is an instance using the Simple Custom CSS and JS plugin.
Step 5
If your WordPress theme includes Google Fonts already built into it, you will need to deactivate your Google Fonts. In the event that you don't, you could be loading local fonts in addition to using Google Fonts. As we're using this theme, the Twenty Seventeen theme in this guide, we're using the no-cost disablement of the Google Fonts plugin. It only works with the themes that are default to WordPress. In the most themes you will probably have to contact the designer of the theme and they'll provide you with a function to deactivate Google fonts. Or check their documentation, usually, this is an easy change. Certain themes allow you to switch the theme off or on in the backend.
And that's it! Screenshot of our new Proxima Soft font loading for the body font as well as the headers of The Twenty Seventeen theme.
Here is a screen shot of our HTTP requests. You can see that there only two requests made for the WOFF2 fonts, in place of four request made by Google as previously mentioned. The WOFF fonts are through the website, however, because Chrome can support WOFF2, they are loaded instead. If we went to the site with IE 11 for example, the WOFF fonts would be loaded instead.
2. How to host Google Fonts Locally
Another method of hosting local fonts is to select one you love on Google Fonts and transfer it to your server or CDN. Open Sans is known to extremely light and fast. This is why we'll use it for our tests.
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. Also, you might want to look into the Font Face Observer project. One of the first things you need to do is locate that Google Font you want, and choose the font's styles. After that, you can select both the standard and large (700) designs of the font.
Step 2.
The next step is that you'll need to choose which browser support you want. Modern browsers support WOFF and WOFF2 fonts, and they're what we're looking for. An excellent support package contains WOFF, WOFF2 TTF, SVG, and. It provides you with the code that you'll be able to copy to your clipboard along with the zip download that contains the fonts.
The remaining instructions adhere to the same format as our premium fonts example previously.
3.
The fonts are downloaded , and then upload them through FTP on our WordPress site to a folder we created called "fonts." In this case, we're making use of the CDN to host all our resources. This goes in addition to the no-cost CDN allower plug-in provided by the team at KeyCDN. The plugin copies automatically fonts that we've transferred onto our CDN. Although we claim to host them locally, the CDN does not yet reference local assets. It is crucial to note that you're hosting all your assets in the same place, instead of using multiple hosts (hosts).
Step 4
There is a need to link to the new fonts with CSS in your WordPress site. Many themes come with the ability to customize CSS panels these days, and also a no-cost plugin like Simple Custom CSS or JS. This code is included in 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+ */ Also, you will need to alter your designs in order to display the most recent font family. This is an example 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's a screen shot of this plugin: Easy custom CSS and the JS plugin.
Step 5
If you're WordPress theme contains Google Fonts already integrated into it, then you'll need to disable them. It could be funny, because we're using Google fonts. The reason we do this is to block external requests. Since we're using the Twenty Seventeen theme in this video, we've opted to use the free disable Google Fonts plugin. It is compatible only with default themes that are available on WordPress. For the vast majority of themes, it is likely that you need to reach out to the designer to get them to provide an option to disable Google fonts. Also, check out their manual. usually this is a simple change. There are some themes that offer an option to turn them off or turn them on in the end of the process.
It's that! Here's a screen-shot of our most recent Google Open Sans font loading to our body font as well as our headers on our Twenty Seventeen theme.
Here is a screen shot of our request. It's evident that there are two requests to get WOFF2 fonts instead , rather than Google's 4 requests which were shown earlier. The WOFF fonts are available in the site too however, since Chrome can support WOFF2, the fonts are used rather. If we visited the website using IE 11 for example, the fonts of WOFF would have been replaced.
Summary
We'd love to know the details of your configuration. Are you using a third company service for loading your fonts on the web ? Have already tried hosting locally?
Reduce time, money and improve site performance by:
- Help is available immediately from WordPress hosting specialists, 24 hours a day.
- Cloudflare Enterprise integration.
- Reaching a global audience with 35 data centers across the globe.
- Optimization through the built-in Application Performance Monitoring.
Article was posted on here