Web Font: History, Best Practices and Licensing

There’s a lot to keep up with when it comes to branding your business online. Something that tends to fall by the wayside is the usage of typography, specifically the font choices made and used on websites and applications. If the most you know about fonts online is that you shouldn’t use Comic Sans (or if you didn’t know that…), here’s a handy overview of Fonts On The Internet.

A Brief History of Fonts Online

In its earliest days, the Internet was pretty much just text. Changing the font displayed wasn’t really a thing until the implementation of the (now dead) <font> tag. The text displayed was limited by what the browser allowed, based on the operating system. This group of fonts already installed on computers by default are considered web safe fonts. A few of these include Arial, Verdana, Georgia and Comic Sans.

If a font wasn’t available to use, the practice of using images as font became the norm. Basically, if you wanted text displayed in a font that wasn’t web safe, you’d open an image editor, type what you wanted, then save it as an image.

This worked okay, but had a several problems

• If you wanted to change the text, you had to open up your image editor, re-save an image and re-upload it (not very content manageable).
• Once that image was re-saved, if you didn’t have access to re-upload it, a dev would need to do it.
• The text was not very accessible. As an image, it couldn’t be copy/pasted and screen readers couldn’t read it by default
• From an SEO standpoint, the text content couldn’t be crawled
• Depending on how much "image as text" was used, this gave the website more files to download and increased load times and bandwidth use

Considering the disadvantages, you might wonder why this practice existed for so long. Eventually, a new CSS standard gave us a bit of help so fonts would be easier to manage and be allowed to shine.

Enter @Font-Face

When @font-face was introduced for CSS, it allowed fonts to be imported from a file instead of only using what existed on a user’s computer by default. To do this, you’d need multiple file types per font, because of differences in fonts used between Windows, Mac, etc. The various font file formats have changed and evolved over the years, so the need to provide multiple font file types has decreased for modern browsers.

The coolest thing is how many different ways there are to get different fonts:

• Google Fonts: A variety of fonts that are free can be added from Google Fonts. Groups of fonts can be built into collections, with Google providing code snippets or downloadable files to help set the fonts up. The option to import the fonts straight from Google’s servers means any updates to the font’s files appear on your site as well.
• Subscription Services: If the font you need isn’t available for free, or you want more choices, various subscription services exist such as TypeKit from Adobe. Similar to Google Fonts, if your font’s file is updated, your site also gets updated
• Local Loading: If you already have purchased a font and have the web version files it’s possible to add it to your server and load it from there. This option’s the best for load times, as there’s no extra call to an external resource, but requires updates to the files be uploaded to your server.

Font FallBacks

Font fallbacks have been a standard for font declarations from the earliest days of the internet, not just since font-face. When you declare a font that you want to use, adding 2 or 3 other fonts afterward says “Hey Browser, if the 1st font isn’t there, look for this one. If that one’s no there, look for this one” So in the code piece below...

font-family: 'Merriweather', ‘Georgia’, serif;

...if the browser doesn’t find a reference to “Merriweather”, it’ll look for “Georgia”. If it can’t find that, it’ll insert any font on the computer that’s considered part of the ‘serif’ font family. This ensures that some form of font file loads, even if it’s not your first choice.

Licensing & Legal Things

There’s a mantra some folks aren’t aware of: Just because it’s on the internet doesn’t mean it’s free. Fonts are created and distributed with specific licenses, including usage online. This can be confusing when you’re buying fonts for use in print materials, because you risk breaking your license agreement and getting in Legal Trouble if you were to try to send those files online.

Sometimes, you can buy packages that include both the print version and the web version of the font. However, be sure to read over the license and what you’re buying, as some require renewal. Depending on the company and font, you may not even be allowed to have physical files for web font versions of a font and will instead have to use a subscription service instead.

Web typography and fonts have come a long way since the appearance of the wee <font> tag in the mid 90’s. Regardless of your business needs, the ability to find and display fonts that align with your brand is significantly easier. And yes, you could still Comic Sans if it's absolutely needed. Just make sure you include a fallback for non-Windows folks.

Need more web advice? Contact the leading web consulting companies in St. Louis by completing our contact form today!