Ever thought about how fonts work? It seems like a boringly technical question, but it’s critical to understanding your web design options. Someday, a web designer will tell you “No, you can’t have that font” and you’re going to want to know why and what you can have instead.
A font is a set of images assigned to certain letters and characters. There’s a great variety of fonts installed on almost every computer. Your word processor could have hundreds to choose from. And if you’re not happy with your current collection of fonts, you can download homemade fonts for free or pay reasonable prices for most professional ones.
So, your computer came with the Myriad Pro font and you want to use the same thing on your business’ website for free. No problem, right? Unfortunately, the answer is no.
Web Safe Fonts
When I look at apple.com, the text is displayed in Lucida Grande because I have Lucide Grande installed on my Mac computer. If I didn’t, then my web browser would try to display the site using one of the other fonts I do have. Most Windows users see apple.com written in Helvetica or Arial.
This brings us to a startling conclusion: The ultimate power controlling Apple’s website font is not Apple. They get to set some preferences, but the power is yours! Or more specifically, your web browser’s.
To pick a font, web designers make a note in their code that tells a web browser the first, second and even third choice of font. There’s no guarantee visitors will have number one or two. There’s a short list of fonts common to both PCs and Macs that frequently make up choices three and four.
This list includes favorites like Arial, Verdana, Georgia and Times New Roman. In all, there are about 15 fonts in the universe to choose from if you want to be absolutely sure everyone sees your website in the same way. Designers call these “web-safe” fonts.
But you’ve probably seen websites with very decorative or unique fonts. How did they get those?
Modern web browsers support a feature called font embedding. This feature displays a font installed on the website’s server or called-up from a font service. This means your site can load its own fonts instead of depending on visitors to have whatever font you picked.
This puts the power and creativity back in your hands. Any font you have the license to use commercially can be part of your site and a majority of customers will see exactly the font you pick. A designer can even custom make a font just for you and use it online. Embedded fonts are pretty darn cool. But they have their drawbacks.
First, you need to have a license for any font made by someone else, which typically requires a monthly payment to the font’s creator. Embedded fonts also slow down your site’s load time which is not great for user experience or search engine optimization. It’s for this reason that most sites (including apple.com) depend on a short list of web-safe fonts, despite the limited choices.
If you’re wondering what the web-safe options are, use CSS Font Stack as a guide to common fonts for Mac and PC. Your web designer can easily use any of those font stacks to design your site.
Not satisfied with web-safe fonts? Google publishes a library of fonts you can embed for free. Of course, if Google ever closes the library, you need some web-safe fonts picked to fall back on.
The best thing you can do is accept the limitations of fonts online. Web design is a constant balance of what looks fresh and cool and ensuring users have the best possible experience. You can’t always get what you want if you truly value your customers. Trust a web designer to choose attractive and dependable fonts (and fall-backs) for your site.