Design Lessons & Trends, Technical Tips

What’s the Difference: Desktop vs. Web Fonts?

Collection Of Typefaces

As graphic designers, fonts are very important to the work we do. In years past, designers like myself were extremely limited as to the fonts we could use for website design. But now, “web fonts” are readily available. But web fonts are different from desktop fonts in several ways. Keep reading to learn just how they’re different.

Desktop Fonts

Desktop fonts must be installed on your computer. We all use them daily, with applications like Microsoft Office and the Adobe Creative Suite. Some desktop fonts are free, while others need to be licensed (purchased) for use. A long time ago (i.e. the early 2000s and before), in order to display desktop fonts on a website we were forced to create a “picture” of the text, which was only practical for large headlines or buttons. To make matters worse, these pictures were no longer “readable” by search engines like Google.

Then the magic of web fonts came into play.

Web Fonts

Web fonts, on the other hand, are specifically designed for use on websites using CSS @font-face. That’s fancy web-speak for easily editable text on your website. These fonts are served from the cloud so, no matter what computer you’re on, you can see these web fonts when visiting any web page that uses one.

Previous to web fonts there were only a select few fonts that could be displayed safely on the web, such as Arial, Verdana, Times New Roman, and a handful of others. With thousands of web fonts to choose from now, typographic web design is almost limitless.

We often try to pick fonts that have both desktop and web versions for brand consistency. There are two main font libraries we use for web fonts: Google Fonts and Adobe Fonts.

Google Fonts

Google Fonts is a free and open-source collection of fonts provided by Google. Google Fonts are ideal for firms that want to use a consistent brand font across all mediums (as much as possible). Google Fonts can be downloaded and used in Adobe Creative Cloud products as well as Microsoft products, such as Word and PowerPoint. This ease of availability makes Google Fonts very popular and prevalent in the world of design.

Adobe Fonts

Formerly known as Typekit, Adobe Fonts is a subscription-based font service offered by Adobe. It provides a vast library of high-quality fonts for use on the website and firm marketing materials created within Adobe’s Creative Cloud. Font licensing fees apply to download and use Adobe Fonts on your desktop, outside of the Adobe suite of products. As a result, many firms designate a widely available desktop font as an alternative that the full team should use in other applications, such as Word and PowerPoint.

Other Licensed Fonts

There are also other licensed fonts available from font foundries and resellers, such as FontSpring, MyFonts and Type Network.

If you have any questions about desktop vs. web fonts send us an email and we’ll be happy to help.

Additional resources:
What is the difference between a desktop font and a webfont?
Web Fonts at the Crossing
Adobe Fonts
Google Web Fonts

In Your Inbox