Let’s talk fonts! Such a fun, albeit confusing subject, no? Fun for the obvious reasons, confusing because—well, if you’ve never had to work with fonts extensively, you’ve likely never needed to understand the difference between web fonts and desktop fonts. So today, I thought I’d explain the differences, and also share some of my favorite font resources with you!
A desktop font operates similarly to how it sounds—from your desktop. With a desktop font, you simply download the font file and install it on your computer. Most desktop font files will download as a .zip file, from which you’ll extract a file that ends with .otf or .ttf, or rarely, .ps1 (if you really want to nerd out and learn the differences between these, check out this article, but for the purposes of running the font on your computer, it doesn’t matter).
Once you’ve properly installed a desktop font on your computer, you can use it in any application that runs fonts from your system’s font library—think Word, Excel, PowerPoint, Photoshop, and the like. This comes in handy if you use particular fonts on your website, and also want to use them in marketing collateral, or graphics for your site. Having the desktop font allows you to match your brand fonts across all visuals, creating cohesion in your branding.
How and why do desktop fonts get used on websites and blogs?
In a best case scenario, a desktop font would never be used to render text/copy on a website, but there are a few reasons this sometimes happens. Sometimes, there’s a unique desktop font that’s unavailable as a web font, but enhances a site’s design—maybe you want to use the font in a single place, as a title or single large call to action. Other times, bloggers who are making tweaks to their sites don’t always know how to write the code to render the web font, and rely on desktop fonts to get the job done. But to be clear, this is not a best practice. To even get a desktop font to appear on a website, you’d have to create an image using the font (e.g., a small JPG or PNG with the words “About the Blog” uploaded to a sidebar). Used in this way, these images not only slow down your load time, but the text will not be crawlable by Google. So using desktop fonts to render text negatively impacts your SEO, and can slow down your site, too. Plus, most font licenses do not allow you to use a desktop font for this purpose.
So, all in all, while this method works (and it’s super old school), it’s labor intensive, usually violates font end user license agreements, makes updating the text around your site a huge headache, and it’s not a standard web practice either.
The better solution? Web fonts!
As opposed to desktop fonts, you don’t use web fonts on your computer’s software applications. Instead, when you are building a blog or website, web fonts are what instruct your site to render text in a particular font, and sometimes style (such as bold or italic).
How one installs web fonts on a site can vary. Some programs, such as Typekit, allow you to create an account, pay an annual subscription, and run web fonts directly through them. Once your account is established and you’ve selected the web fonts you want, you must instruct your CSS to pull the web fonts from Typekit. It’s not difficult, but it does require some knowledge of CSS (Typekit offers tutorials on how to use their fonts for WordPress here, and virtually any web developer will know how to take care of this for you, too!). Typekit isn’t the only service that hosts fonts in this manner; Google Fonts is another perfect example. In fact, if you run your blog on Blogger, Google Fonts is one of the easiest ways to switch up your blog’s fonts.
What does a web font look like when run from an external service like Typekit or Google Fonts? You’re looking at an example right now! The sans serif font we’ve used for <em>dash posts is from the Quasimoda family, which we run through Typekit.
Additionally, web fonts are often downloaded from a site such as Fonts.com, MyFonts, or You Work For Them. In this case, web font files are downloaded and installed directly into the websites’ “root” or index files, which then allows a website to run the fonts from a file on its own server (as opposed to someone else’s server, like with Typekit).
Web Safe Fonts
All websites, regardless of design, make use of web fonts in some capacity—even if you haven’t instructed the website to pull a web font from a provider like Typekit, or installed files from a service like MyFonts. This is to ensure that a font can render (and the contents of the site can be readable) if for some reason the web font won’t load. For example, if Typekit were to go down (oy, the Internet would look ugly!), web safe fonts would render in place of the Quasimoda font you’re reading here. In fact, there are certain web fonts that one could simply write into their CSS code, and they’d automatically appear in anyone’s browser, because the font is considered a standard or “safe” web font. These “safe” web fonts include:
Times New Roman/Times
Comic Sans (I know, right?)
Lucida Sans Unicode/Lucida Grande
Once you’ve gotten a web font installed on your site, you can use CSS to adjust the font in a variety of ways. This includes things like the font size, the line height (how far apart lines of text are in a paragraph), the letter spacing (how close together letters are within a sentence, also known as tracking), and whether the font can be bolded, underlined, italicized, or changed into the color of your choice. Neat, huh?
Regardless of whether you learn how to adjust web fonts via CSS or not, if you’re a blogger/website owner who ever plans on working with a designer or tweaking your site fonts yourself, it’s important to understand the differences between web fonts and desktop fonts, and why they’re not necessarily interchangeable. For example, if you find and fall in love with a font online, and you want to use it across your blog design, it’s important to check whether it’s available as both a web font and desktop font—the former so that your blog can use it, the latter so that you can use it on your computer for things like business cards or collages. Also, don’t forget that purchasing a web font and a desktop font can result in two different costs, depending on where you buy it from. I always like to remind my clients that if we’re using a special font for their project, they may be charged two fees for it: one for the desktop version, so I can use it was we mock up their website, and secondarily for the web font version, which we’ll eventually install on their server.
our font solution!
But, here’s the good news: If you really don’t want to deal with web fonts, with an <em>press theme, you don’t have to! We know manipulating web fonts can be confusing, which is why we built our Font Customizer plugin to pair with <em>press themes. It comes pre-loaded with hundreds of font combinations, so all you need to do to change fonts on your <em>press blog site is click to select your favorites. No code knowledge needed! You can see it in action on this demo site, by clicking on the pink tab in the upper left corner. We’ve also written a post sharing some of our favorite font combinations with Font Customizer!
Other Fun Resources
League of Moveable Type
Fonts in Use
Fount – For identifying any web font you see
Type Sample – Ditto! Also with a super easy to use bookmarklet
What the Font – For identifying desktop fonts
So You Want to Create Your Own Font…
7 Tools for Creating Your Own Fonts
@Font-Face Web Font Generator