Most of you probably have some idea what a system font or computer font is. They are loaded on your computer and allow you to create documents with different font faces. Arial, Helvetica, Times New Roman are examples of some of the system fonts probably on your computer.
A web font is installed on a web server and allows you to create web pages with a large variety of font faces. Why is this important? Read on and I’ll explain why web fonts are so important and how to use them on your own website.
Why are web fonts important?
Once upon a time before the use of web fonts, when developing a webpage we had to be careful which fonts we chose to display the text on that website.
If we declared a font that wasn’t installed on the computer of the person visiting the site, the webpage could not display the content the way we intended.
The end result was that most of the web pages on the Internet were forced to use the same 4 or 5 fonts because they were the fonts most likely found on the personal computers of the visitors reading the page.
With the advent of web fonts, we can now declare a web font not installed on the reader’s computer because the font is loaded from a web server instead. But why is that important?
Web Fonts Provide consistency
Web fonts are a big deal because they provide consistency in a web page’s design. As the designer of a webpage, we know with almost 100% certainty how that page will look on almost all computers because the font is being called from a web server. We don’t have to worry if the reader has that font installed on their computer.
If you use web fonts in the design of your website, you can be confident that your text will display consistently and as expected across all platforms, devices and computers.
Web Fonts Provide Speed, Efficiency and Increased SEO Value
Other advantages to using web fonts is increased speed and efficiency in design, and increased SEO value. Before the use of web fonts, if we wanted to create a headline using an unusual font, we had to create the headline in Photoshop, save it as a jpeg and upload it to the website as an image.
The human eye can read this image. But Google can’t. It see’s it as an image, not text. So the content of the jpeg loses it’s SEO value.
Also, if in the future we needed to change the content of the header, we had to go back into Photoshop, create and save a new image and re-upload it to the website. This is maybe okay for one or two images, but can quickly turn into a nightmare when trying to manage an entire website!
Test it for yourself. The text below is live text, not an image. You can select the text to see for yourself. Since I’m pretty sure you don’t have either of these fonts installed on your computer, the only reason you can see them using the fonts I’ve chosen is because I’m linking to a font I installed on my own website’s server, and a Google font using Google’s font-hosting service.
This is a self-hosted web font.
This is a web font from Google.
Integrate Website Design With Visual Branding
The use of web fonts dramatically expands the number and style of fonts that can be used on your website. There are literally 1000s of web fonts to choose from. Because of that, it’s possible to closely match and integrate the design of your website with your business’ visual branding. A few years ago, this was not possible.
How to Use Web Fonts?
There are three basic ways you can add web fonts to your website.
(1) Link to Google’s web fonts by adding a bit of code to your functions.php file or your css file. Google’s font-hosting service is free. If you’re comfortable editing some of your WordPress files, you can do it yourself. But if you’re not comfortable, you can hire a web developer to do it for you. Below is an image showing the code to use the font “Roboto” on a website.
(2) You can use a service like Adobe Typekit that isn’t free. For a small fee, you have access to their font-hosting service. If you have the monthly subscription to the Adobe Creative Cloud, Typekit is free. Adobe’s instructions for adding their web fonts to your website can be found on this page.
There are other font-hosting services online in addition to Adobe Typekit and Google. Some are free and some are paid services.
(3) You can purchase a font and install it on your host provider’s web server then declare the font in your css file. This is known as self-hosting. Desktop fonts can not be used as web fonts. Make certain the font you purchase is specifically made for the web. The most common file format for a web font is .woff. However, the better web fonts you will have four different types for you to install to make certain your font works on all browsers and devices. They are WOFF, SVG/SVGZ, EOT and OTF/TTF.
You may be able to use just the .woff file if that’s all that’s available. If you can find a font fact that includes all four, you can be fairly certain your font will work for anyone visiting your site.
Using Google Fonts With a Plugin
If you want to add Google fonts to your WordPress website and you don’t want to hire a web developer, you can use a plugin. This allows you to link to Google’s font-hosting service without having to edit your WordPress files. However, you’ll still need to edit the CSS file to declare on what aspects of your page you want your font to appear. You can view a tutorial on CSS on this page.