Join Morten Rand-Hendriksen for an in-depth discussion in this video Where does the font live?, part of WordPress Developer Tips: Using Custom Web Fonts.
- View Offline
When you choose to use custom web fonts in your WordPress theme, you have to make a conscious and deliberate decision about where the files for that web font are going to live. You can either choose to place them in your theme or you can use a third party service to serve those files up. This is important because when you're using a custom web font, the browser has to download all the font files and then install them locally inside the browser so that it can display all the content with that font. And where the font and the font files live makes a difference in how those fonts are going to work in your site.
So, I like to say you need to consider the font living arrangements. You have two main options here. You can either use a third party service to host your font. And in many cases, you have to use a third party service to host your font. Or, you can place the font inside your own theme. Each option has benefits and drawbacks. So let's go through them. If you chose to use a third party service in the Cloud, you get fast download. And that is the main reason why you'd want to. Because I can pretty much guarantee that Google Server or the Font Kit service from Adobe are going to be faster than your own hosting provider.
When fonts are hosted in the Cloud, you also reap the benefit of background updates. If the host decides to update the font set to fix an error or to add new content to it, you automatically get that new content. You don't have to worry about it because you are calling the files in from somewhere else. You are leaving them in charge of managing that font. The problem with using a third-party service is that third-party services might fail. They might be too popular or something might go wrong on their server and in those cases you won't get the font on your page and your content will display differently.
So, as you will see later in the course, you have to make concessions for this and make sure there are fall backs in case the font doesn't get brought in. A font in the Cloud also requires an online connection and that has implications if the site you are building is going to work in a firewalled internal network. Meaning, it doesn’t have a connection to the web. This would be if you're working in a company that has a firewall and you're on an intranet or if you're, for instance, in a hospital where the internal network is completely separate from the web.
In those cases, you have no choice but to host the font locally, because the website simply can't pull the font down from the Cloud. The other option is to host the font inside your own theme. If you do so, you are now relying on your own server to feed up the font. And that means if it's a very large font set, it'll take longer to download. Now, when I say longer, I'm talking about milliseconds. But it does mean that in some cases, a visitor may experience seeing the default font first and then the new font snaps into place and you get this weird snapping effect.
It only happens once for that visitor, but it's still something you need to consider. On the upside, when you host your own font, you have full control. You decide when an update is needed. You also decide which icons are going to be in that font. So, if you want to use a font that has a lot of icons, but you're only going to use two or three of them, you can simply remove the rest of them and only load up the ones you need. Because the font is now setting inside your own theme, you're not relying on a third party. As long as the theme loads, the font will load as well, so this is the correct solution if you are inside an internal network or on an intranet.
So, in summation, any time you are considering using a web font, consider where the font is going to live. And like I said, in some cases you don't have a choice and if you are going to rely on a third party service you have to make sure you have fall backs. And we`ll cover all of that in this course. You know exactly how to do both of these things.