Join Morten Rand-Hendriksen for an in-depth discussion in this video Web fonts: A primer, part of WordPress Developer Tips: Using Custom Web Fonts.
Before we start adding custom fonts to our WordPress theme, let me give you a quick primer on what web fonts are, and why they're so important. If you think back a couple of years, you'll remember that when you visited content on the web, pretty much everything looked the same from a font perspective. That's because in the past, our websites relied on whatever fonts were installed on the visiting computer. So, if I set up some fancy font for some of my content on my site, and you visited that site and you didn't have the same fonts as me, you would see my content in whatever font you had available to you.
As a result, web developers would save it, by always applying a set of standardised font families like Arial, Helvetica, sans-serif or Georgia,Times,Times New Roman and serif, that way they they knew that when people visited their sites they would get either a sans-serif font that was fairly generic or they would get a serif font that was also fairly generic. This worked quite well, but it also made the web quite boring from a typography perspective. So, web designers and developers started coming up with all sorts of crazy ways of adding in custom fonts.
They would use image placements for fonts. Or, try to tunnel through the web to display fonts in a different way. Well, over the past few years this has changed because we have new technology available. So, we no longer have to worry about these, standard, basic boring fonts. We can add whatever fonts we want and we can do that through CSS. In more modern CSS we have what's known as the @font-face declaration, which allows us to bring in custom fonts to the site and get the browser to work with those custom fonts.
As a result as long as you have a web friendly font, you can display that font on your sites without the visitor having to have that font installed on their computer. This means, you can add pretty much whatever font you want on your site as long as you have a license for that font, and it also means that you are no longer restricted when it comes to typography design, on your site. If you want to get a more complete understanding of what web fonts are, and how they work, and also the history behind the web fonts movement, you should go check out this movie within the, Web Technology Fundamentals course from James Williamson.
The movie is called Web Fonts, and it gives you a quick history of web fonts, and also shows you how they work. While you're at it, you should also go check out James' other course, Deploying Icon Fonts for the Web. You see, web fonts also allow us to do something completely new. And that is, use what's known as Icon Fonts. So basically, a font set that instead of having regular letters, has icons. And this has tremendous potential and allows you to do things you simply couldn't do before, with graphics. And the cool thing is, the techniques I'm teaching you in this course about how to add custom web fonts to, your WordPress themes, work with custom icon fonts as well.
So when you know how to add a regular custom font, you can also add a custom icon font. And in deploying icon fonts for the lab, James shows you, not only how to deploy, regular icon fonts. But, also how to create, your own, custom, icon fonts, just for your sites.