What Are Web Fonts?

What are web fonts? - Design for Creative Souls

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 right now.

By comparison, 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.

However, the advent of web fonts, we can now declare a web font to display the text on our websites even if that font is not installed on the reader’s computer. That’s because the font is loaded from the the font’s web server instead of the website visitor’s computer. 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 “served” 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. Below you can see an example of a header that I typed in Photoshop, and saved as an image to display here.

Header text saved as an image.

Before the days of web fonts, if we wanted to use interesting fonts in our web design, we had to create them as images first. Otherwise, most people viewing the website would see the font as the web designer intended. The good news is that the human eye can read the image as text. The bad news is –  Google CAN NOT. It see’s it as an image, not text. So whatever actual CONTENT or text of the jpeg completely lost its SEO value.

Also, if in the future I needed to change the content of the header, I 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. Unlike the header above (which is text saved as an image), the text below is LIVE TEXT. It is not an image. You can select the text with your mouse/cursor 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 in the first example I’m linking to a font I installed on my own website’s server. And in the second example, I am linking to (or declaring) a Google font that is hosted on Google’s font-hosting web server.

This is a self-hosted web font.

This is a web font from Google.

Integrate Your Website's 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.

customizer Google fonts(1) The most common way to add web fonts to your website is via Google’s web fonts. Google Fonts are free, and there are currently over 800 different font-faces from which to choose.

To choose the Google Font(s) you wish to use on your website, you choose the font(s) using the WordPress Customizer.

The ease of implementing Google Font’s in your website’s design will depend on the WordPress theme you’re using. I am using GeneratePress on this website. By default, GP displays the 200 most popular Google Fonts in the Customizer list.

There are scripts you can add to your site using a plugin like Code Snippets that will expand this list. Also, if your theme doesn’t have Google Fonts in the Customizer you can add them via a plugin like Google Fonts Typography.

When you choose a font from the Customizer list, it allows anyone to view the content on your website using that font, even if they don’t have the font loaded onto their own personal computer.

(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.

Adobe Typekit fonts

There are other font-hosting services online in addition to Adobe Typekit and Google. Some are free and some are paid services.

The advantage to using Adobe Typekit over Google is for the most part, Google fonts are “open source.” That means they are free, but quality will definitely vary depending on the font used. Some fonts on Google fonts are just plain horrible in the way they display in your browser. 

Adobe Typekit on the other had is a premium library of professionally designed fonts. All the fonts in the library are vetted by Adobe. But they are expensive for anyone who doesn’t already have a subscription to Adobe’s Creative Cloud service. 

(3) You can purchase a web font and install it on your host provider’s web server, then declare the font in your website’s css file. This is known as self-hosting.

Desktop fonts can not be used as web fonts. These fonts are created to be used for print, and used as system fonts.

If you want to purchase a font to use on your website, make certain it is specifically made for use on the web. The most common web font is a .woff file. However, the better quality web fonts you will have four to five different types for you to install to make certain your font works on all browsers and devices. They are WOFF, WOFF2, SVG/SVGZ, EOT and OTF/TTF.

Self-hosted Web font

You may be able to use just the .woff file if that’s all that’s available. If you can find a font that includes all five, you can be fairly certain your font will work for anyone visiting your site.

One of the best places I’ve found to purchase high quality web fonts is Design Cuts. Their tutorial for installing the fonts on your own server can be found here.

Design Cuts has a large variety of high-quality fonts. Just make certain when you purchase one, it is specifically designed and created as a WEB FONT, or you won’t be able to use it on your website.


Web fonts on Design Cuts

webfonts2 / Design for Creative Souls

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *

Share Post
Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on pocket
Share on email
Affiliate Links

One or more links on this page may be an affiliate link. What does that mean? At no additional cost to you, I will earn a small commission should you click on one of the affiliate links and purchase the product or service. 

Take the Brand Personality Quiz

Discover your brand archetype and how you can use its power to your strengthen your online presence