The How and Why of Using Fonts on the Web

Every month we highlight a different font foundry. These foundries are usually showcased because we have been using them in client projects or they are just really cool. As we were preparing to write our next post for the month, I thought it would be useful to discuss how to use fonts online. In the web world, we were once burdened by the phrase “web safe fonts.” Even typing that now makes me shudder as I remember the old days of only having 16 fonts to choose from for every web project. It wasn’t THAT bad, but you really had to get creative trying to find a new way to use Arial for the 53rd time.

Web Safe Fonts

So, what is “web safe font” and why is that so important? Well, having a website is a pretty big deal and that website needs to be found, usually by doing a search with a search engine. For your website to be found, it needs to have text on the page that the search engines can read and find. Back in the day, and unfortunately sometimes now, sites are built using no text at all… yes, no text at all. How? Sometimes a program called Flash is used to create flashing text and sparkling headlines. Other times people just use big flat images to create sites—it is mind-boggling how this is done just to achieve an over-the-top aesthetic.

Sometimes these sites have a little bit of text on the page but not enough substantial content to do its job. Great sites have real text on their pages that is generated using plain old HTML. The way this text is displayed visually is tweaked using something called CSS (cascading style sheet), which is a language used to talk to you browser and tell it how to display elements. CSS has different versions—1.0, the first, came out in 1996. Yes, 1996! So, there is this “Working Group” that reviews CSS and sets the rules of what it should do. These rules are then supposed to be supported by web browsers. For instance, if you use Chrome, it should support CSS 1. Well, since 1996 there have been new versions of CSS introduced and around 2011, CSS3 was finally supported by bigger web browsers. CSS 3 has this wonderful little thing called “@font-face” that allows you to call just about any font your heart desires—with appropriate licensing—to use on your website. It is a very, very good thing.

The Kicker: Appropriate Licensing

So, when that came out things were golden, right? We could have this endless list of beautiful, creative, professional, fun, masculine, quirky, feminine fonts to choose from, right? No. Here is where “with appropriate licensing” comes into play, and it’s a big deal. People make fonts, and those people usually license their fonts. You have to follow their licenses to be able to use them. The web is a whole new beast. So, when you use @font-face, you are calling a font that you uploaded to your website. It is then downloaded to that specific user’s device in order for them to see it. So, essentially, anyone can download those fonts and use them—that’s a big problem for a lot of type designers. It would be like having the ingredients to your favorite secret tomato sauce that could make and share whenever you want but the poor chef who worked hard for decades mastering that recipe sees none of the revenue.

Free Fonts: Proceed with Caution

We had this awesome new CSS feature allowing us to use any font but now we couldn’t use fonts because type foundries didn’t have a trusted method for web use yet. Not everything comes with a price; there are tons of free fonts around the web that can be used. There are some really great free fonts out there, but BEWARE—a font shouldn’t be used just because it’s free. I say this mainly because these fonts might not have been optimized for online use, and that can wreak havoc on any web project. If you want to see what free font options there are out there, Google and Font Squirrel can help.

Google is pretty awesome in that they curate their collection and you can use a simple little snippet to get the fonts you want. Font Squirrel is a bit more of a loose cannon. You can pretty much create any web font you need, but don’t use it to rip off licensed fonts; that just isn’t cool. It also requires a bit more legwork on your end to get it up and running on your website.

Finding Licensed Fonts Online

Over the last few years, foundries and vendors have been trying to find safe and reliable ways to display licensed fonts online. Currently, we find there are two distinct ways to use web fonts online—either purchase a monthly subscription to a large font vendor that has a library of diverse foundries or actually purchase a web-specific license from the foundry that then uses some nifty code to make that font only usable online.

The monthly subscription route is quite popular with our clients. A few sites you can do this through are:

Buying s subscription has its pros and cons. Each of these sites is different, but you usually have access to a large library of fonts. The amount you pay is usually dependent upon how many pageviews your site gets per month. As far as getting into multiple websites, you can have that capability within your account but the pricing may vary depending upon the vendor.

The other option is to purchase a one-time web license for specific fonts. You can usually buy this type of font through a large vendor like:

Certain foundries may actually require you to purchase a license directly through them to use their fonts online. For one client, we had to work with a foundry in Germany to obtain licenses.

Making Websites Even Better

The above are a few ways we have been able to use web fonts online, but there are probably even more! For every client that comes to Papercut, we research their options and present the route they can go to get their branded fonts online.

I thank the CSS gods every time I open a new project and put in that @font-face line. Modern websites are in such an exciting time right now. We can use beautiful fonts that not only match a brand but can also stimulate emotions, feelings and memorable experiences from online visitors that we couldn’t in years past. Yes, I promise—fonts can do that. Have you used web fonts in your projects? Have any questions? Let’s discuss!