Web Typography Best Practices: Web Fonts 101

web typography best practices

I love fonts. You love fonts. Everyone loves fonts. Our curated font posts are some of the most popular articles on our website, and a common question I always get is, “can I use that font on my website?” Downloading and installing a font onto your computer to use in, for example, Photoshop, is easy. However, it’s not quite as straightforward when you want to use a font on your website. The first step to web typography is learning that not all fonts are created equal. I classify fonts into 3 different webfont categories: “web safe” fonts, Google fonts, and other fonts. Let’s break it down.

What is a “Web Safe” Font?

A web safe font is considered “safe” for the web because it’s found, preinstalled, on most everyone’s computers. Because of this, no extra steps are needed to use a web safe font on your website: if you tell your website to use Trebuchet MS, everyone will see Trebuchet MS because about 98% of the world has it preinstalled on their computers. Web safe fonts are usually quite basic–familiar fonts like Times New Roman, Georgia, and Arial, for example–and you can use something called a web safe font stack to ensure that, in the unlikelihood that someone doesn’t have the web safe font you’re using on their computer, an almost identical font will be used instead. This is a great resource when searching for web safe fonts.

examples of web safe fonts

Pros of Using Web Safe Fonts: Free, easy to add to website with no extra steps, no negative impact on loading time

Cons of Using Web Safe Fonts: Basic/not a lot of options

What is a Google Font?

Google has an awesome, massive font library. All of the fonts in the library are open source and free, meaning they can be used by anyone without having to worry about licensing issues. Google hosts the fonts so you don’t have to upload any extra files to your website, and their servers automatically send out the smallest file possible so your visitors aren’t waiting forever and a day for the fonts to load.

favorite google fonts
Pros of Using Google Fonts: Lots of options, free, don’t have to add extra files to your website, generally little negative impact on loading time if limited fonts are used and added correctly

Cons of Using Google Fonts: Possibility of negative impact on loading time if added incorrectly (or Google’s servers are being slow), a few select fonts don’t always look the same between operating systems/internet browsers

[convertkit form=4914978]

What About “Other Fonts”?

I consider a font to be an “other font” if it doesn’t fall into one of the two previously discussed categories. This could be a font you downloaded from DaFont, a font you purchased from MyFonts, or a font you found somewhere else. The biggest thing you need to know about “other fonts” is the font license. Fonts that are 100% free and/or in the public domain are always a-okay to use on your website. However, for others, especially for fonts that you have purchased from independent font designers, you may need to purchase the right license and/or files in order to use them on your website. For example, most fonts at MyFonts can be purchased in two formats:

  • Desktop font, for work on a desktop workstation
  • Webfont, for your website or web application (when you purchase the webfont version, you not only get the proper files you’ll need to embed the font onto your website, but also the license that allows you to do so)

These licenses can get complicated, as some licenses only cover up to a certain amount of page views. If you exceed the number of page views that came with your license, you should purchase another one.

web fonts best practices

Pros of Using “Other Fonts”: offers more variety

Cons of Using “Other Fonts”: not always free, licensing can be complicated, can have a negative impact on loading time, more difficult for beginners to add to their website

Now What?

Once you’ve decided what type of font you want to use, the fun (or should I say, kinda-complicated-but-rewarding-after-you’re-done) part is to add them to your website! I’ve written a tutorial for you right here!