The web used to be a wild and wooly place where there were only a few typefaces available to designers (sadly, around 10). Any words you saw in a fun and unique typeface were images embedded into the website.
As the web evolved to be a place where people do business and share their lives, designers needed more.
Our friends The Great Internet Overlords (my fun nickname for the group of people who look after creating new ways to do things on the internet by building best practices and monitoring their implementation) decided to solve this problem by creating technology to embed fonts into a website. It was called the web font.
This created a world of design opportunity and paved the way for the way the internet looks and works today.
What is a Web Font?
The definition of a web font is this:
A web font is a typeface that can be used on a website.
Getting Techie with It
Okay, so the definition above is a little overly simplistic, but it gets the point across. To truly understand a web font, however, read on.
The internet is a series of files and images that live on someone else’s computer that you view through a program that lives on your own computer. That program is your browser (like Firefox, Chrome, Safari or – heaven forbid – Internet Explorer).
A web font is a font that comes with a specific set of code files that will allow your designer to use it on your website. Those code files in turn allow the visitor’s browser to display the font you want.
Web Fonts & Web Safe Fonts
There is only one problem with the web font/browser combination: browsers are made by companies, and those companies are responsible for keeping them up to date and working correctly. (That’s why the good browsers will ask you to update them often, and why you always should.)
A web safe font is a set of simple, standard fonts that all browsers recognize regardless of how current they are. These fonts are fonts like Arial, Verdana, Times New Roman and Georgia. None of them are bad fonts, but none of them are unique.
Web safe fonts are used by designers as “fall back” fonts. If the super awesome font you chose for your site can’t be displayed by the visitor’s browser – for any reason – the browser will look for a second font to display. That second font is a web safe font chosen by your designer to still look good (relatively speaking) if something goes wrong with displaying your primary font.
Often web safe fonts are used as the primary font for your content to ensure that everyone has the same viewing experience. (And also, web safe fonts are defaults because they are easy to read, and if you’re subscribed to the Web Essentials series you know how important readability is.)
Congratulations, you! You’re practically an expert on web fonts! Now you’re ready to go looking for the right font to create your online look.