The Importance of Carefully Choosing Web Fonts for Any Web Project

In August of 2013, I did a blog post on this topic and, nearly 8 years later, it’s still an issue I frequently run into so I felt revisiting the subject in a better fleshed out blog post could be useful.

I do a lot of projects where I’m taking a design and building it in WordPress or Shopify. One thing that I frequently run into is the use of non-web-friendly fonts throughout design files or just confusion over what exactly is needed to use a design file’s fonts legally on the web. Sometimes it’s a mix up over licensing and sometimes I think it just flies under the radar as something designers need to consider when designing for the web.

Desktop vs. Web Font Licensing

Most premium fonts, meaning a font that isn’t from somewhere like Google Fonts or similar, are available to purchase in either desktop form or a separate license for web use. These two license types are not the same thing.

Desktop font licensing typically is associated with users. You may purchase a desktop font for up to 3 users, for example. This is granting the amount of users purchased the ability to install that font on their own computer and use it in any computer applications and it can be used to create any static content (like print design items like brochures and similar.) If you own a desktop font license for a project, you can fire up Photoshop or Illustrator or your graphics program of choice and go to town.

But wait, isn’t a web design commonly made in these applications? So a desktop font should be good?

Unfortunately, no. Your web design won’t be a static asset for a visitor. It’s an interactive live website in its final form and type used is selectable, done by CSS font declarations. A desktop license does not grant you legal web use of the font.

I’ve seen web designers misstep here and assume, because they own the desktop license for a font, they can use it in their web designs. However, using a commercial font on the web requires purchasing a specific license for website use. It’s often tied to things like unique views per month or similar, like on Fonts.com.

How Do You Know What Licensing Your Fonts Require?

Personally, I’d recommend just going to Google and searching for “[name of font] web use”. This will turn up results that give information on how the license can be purchased or will show the font being available on a free service like Google Fonts.

Pay attention to licensing through services like Adobe Fonts. You cannot use your own Adobe Fonts account for a client project. If the fonts are for a client’s website, the client themselves would need to pay for an Adobe Fonts subscription to use any fonts through there.

Tip: Don’t Go Overboard on Different Font Weights

Every font weight used in a design matters, especially when it comes to licensing. Often, when buying webfont licenses, you’re paying a fee per font weight used. Meaning if you’re using a font like Gilroy and using Thin, Regular, Regular Italic, Bold and Bold Italic in your design, you are licensing 5 webfonts. It can add up quickly.

Even factoring out the increased licensing fees, the more premium font weights you use, the heavier the webfont load will be for the site. If you use the regular and bold weight of a font primarily, but just use the medium weight for one particular design spot, you’d be best to adjust the medium weight to regular or bold. This cuts out the medium weight from needing to be licensed or loaded into the site. Making little choices like this can make a huge difference.

How to Find Fonts Safe for Web Use

If you are a designer, here are some handy resources to check out that will show the default web safe fonts. These are fonts that don’t require loading in an external font kit through either a purchased webfont or a service like Google Fonts. These are fonts that can just be called in CSS and will display on most, if not all, computers:

CSS Web Safe Fonts: basic list of fonts that are common enough to be considered web safe
CSS Font Stack: this site offers a complete collection of web safe CSS font stacks

Where to Find Additional Web-Friendly Fonts

If you want to venture beyond the common web safe fonts, but keep it in the free zone and do something via font kit, check out:

Google Fonts
Font Squirrel (filter by webfont)

Font Squirrel also has a handy webfont generator and services like Transfonter do, as well. You can use this if you have a font that isn’t on Google Web Fonts or Font Squirrel but is licensed for web use. Just because you have the font file doesn’t mean you can use it via font kit so be sure to check the licensing on your fonts.

Locating Additional Premium Web-Friendly Font Options

Additional options are available through paid services like:

Adobe Fonts (formerly Typekit)
cloud.Typography

If you are using a font that is offered through one of these paid services, make sure your client is aware that they will need their own account to use these fonts. They cannot use yours.

Sometimes I’ve had designers mistakenly think they can use their own Adobe Fonts account that they have through something like a Creative Cloud subscription to be able to use these fonts without the end client incurring any costs there. While Adobe Fonts (formerly Typekit) did used to have licensing where that was the case, they no longer allow it as of the end of 2019.

There are also sites which sell fonts that offer webfonts as font options such as MyFonts, FontShop, Fontspring and I’m sure there are others. Most have notes about what exactly the license is for (unlimited users vs. a set number, unlimited sites vs. a set number, etc.) so be sure to read the terms carefully if you’re purchasing a web font through that route.

Research Those Fonts, Kids

Overall, it takes an incredibly short amount of time to research to ensure your design uses fonts that translate easily to the web and it really helps make a smooth handoff from designer to developer. It’s never great to fall in love with a font in a design and get client approval only to find out you can’t legally use that font on the web or to unexpectedly have to burden the end client with unanticipated high font licensing fees in order to do so. By doing just a couple minutes of research on any font family before pushing forward with it, you can prevent a headache down the line!

This post was modified from one originally written in August of 2013.