Let’s talk fonts! If you’ve never had to work extensively with fonts, you’ve probably never needed to know the difference between web fonts and desktop fonts. Today, we’re diving into the differences, and sharing some of our favorite font resources with you!
WHAT ARE DESKTOP FONTS?
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.
How it works
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 the desktop font, you can use it in any application that runs fonts from your computer’s font library—think Word, Excel, PowerPoint, Photoshop, and the like.
This comes in handy if a set of fonts is part of your brand identity, and you need to use them in marketing collateral, or other graphics. With desktop fonts available in the applications used on your computer, you can easily match your brand fonts across all visuals, creating cohesion in your branding.
Why do desktop fonts get used in place of web fonts on a website?
Bloggers making tweaks to their sites don’t always know how to write the code to render and style a web font, and instead rely on desktop fonts to get the job done. In these cases, they’ll type a title or other snippet of text in a creative application like Photoshop or Canva, then save and upload their text as an image.
To be clear, this is not a best practice. Used this way, these images slow down your site load time, and the text cannot be crawled by Google. So, using desktop fonts to render text negatively impacts your SEO, and may even impact the user experience if everything loads slowly. Plus, most font licenses do not allow you to use a desktop font for this purpose.
The exception to this is when a desktop font is used within a logo — it’s common for logos to be uploaded as an image or vector file! However, be sure any fonts you’re using within logos are licensed for such use.
Beyond logos, the only other common reason a desktop font would be uploaded as an image is if you’re working with a unique 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, like a large call to action that’s part of an illustration, or with a signature at the bottom of each blog post. Again, in these cases, be sure the desktop font license allows for this type of usage.
But in most cases, desktop fonts shouldn’t be used to create text on your website. The better solution? Web fonts!
WHAT IS A WEB FONT?
As opposed to desktop fonts, you don’t use web fonts in your computer’s software applications. Instead, when 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).
Web fonts can be installed in a variety of ways. Here are the most common methods:
- Use a Plugin: WordPress users may opt to install a plugin, like Use Any Font, to upload their favorite fonts and apply them across their site. For most themes, applying fonts with a plugin requires knowledge of CSS, so that you can target and style the fonts.
- Use Adobe Fonts: Â With Adobe’s Creative Cloud platform, you can run web fonts directly through their service. Once you’re a subscriber, simply add your desired fonts to a web kit. Then, you must instruct your CSS to pull the web fonts from Adobe. It’s not difficult, but it does require some knowledge of CSS (Adobe 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!).
- …or another font service!: Adobe Fonts isn’t the only service that hosts fonts in this manner. Google Fonts is another perfect example—and it’s free! In fact, if you run your blog on Blogger, Google Fonts is one of the easiest ways to switch up your blog’s fonts.
- Integrate fonts with @font-face: The most “advanced” of the options, web font files may also be uploaded to your server, and styled directly within your website’s stylesheet.
- For more information about all four of these options, check out our Help Desk article on Adding and Customizing fonts in a WordPress theme.
Curious what a web font look like when run from an external service like Adobe Fonts? You’re looking at an example right now! The sans serif font we’ve used for EmPress blog posts is from the Quasimoda family, which we run through Adobe Fonts.
Other Places to Download Web Fonts
Other great places to download web fonts include Fonts.com, MyFonts, Font Shop, or You Work For Them.
If you purchase and download a font from one of these sites, you’d need to use the @font-face method to incorporate them into your website. By doing this, the files are installed directly into your websites’ “root” or index files, meaning your site is running the files from its own server (as opposed to someone else’s server, like with Adobe Fonts).
We’ve listed even more great places to download web fonts in the Font Resources section at the end of this post!
WEB SAFE FONTS
All websites, regardless of design, make use of web fonts in some capacity. 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 Adobe Fonts 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:
- Georgia
- Palatino Linotype
- Book Antique
- Times New Roman/Times
- Arial/Helvetica
- Comic Sans (I know, right?)
- Impact
- Lucida Sans Unicode/Lucida Grande
- Tahoma/Geneva
- Trebuchet
- Verdana
- Courier New
STYLING WEB FONTS
Once you’ve installed a web font 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?
- We talk more about styling fonts in our Help Desk article, Adding and Customizing fonts for a WordPress theme
FONTS, LICENSING, AND LEGAL ISSUES
Check the licenses
If you find and fall in love with a font online, it’s important to check whether it’s available as both a web font and desktop font—the former so that your site can use it, the latter so you can use it on your computer for things like business cards, letterhead, or other promotional materials.
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. We always like to remind 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 we can use it was we mock up their website, and secondarily for the web font version, which we’ll eventually install on their server.
Check the End User License Agreement (EULA)
Fonts, just like other types of software, usually include an End User License Agreement or EULA, which stipulates how they can be used. When using any font, whether free or purchased, be sure to carefully read the licensing agreement, so you understand where and how you can use the font.Â
Think about it like this: You spend a lot of time creating content for your blog, and would probably have feelings if people lifted your content and used it either for profit, illegal means, or some other method that you were uncomfortable with. Artists and small businesses who create fonts are no different—so honoring and respecting a font license is always a good call.
For example, some font creators prohibit use in logos or other incorporated material, so be sure to read the fine print before using your favorite font in your branding—especially if you plan to register your logo as a trademark down the line.
What about using free fonts, or “dupe” fonts?
Similarly, you may come across websites that appear to offer “free” versions of fonts that look nearly identical to a paid font you found elsewhere. Tread lightly here—because of the nature of digital files, it’s not uncommon for people to upload font files on these types of sites, name them something else, and distribute an artist’s work free of charge. In other words, these fonts may be pirated.
While it’s tempting to use a seemingly free version of an otherwise expensive font when you are first starting out, do bear in mind you may be stealing from an artist or small business. When it comes to using free fonts, stick to the reputable sites like Google Fonts, or the ones we’ve noted below as offering free fonts.
our font solution!
But, here’s the good news: If you really don’t want to deal with web fonts, with an EmPress theme, you don’t have to! Many of our themes include Google Fonts integrated directly into the theme Customizer, making it easy to apply fonts across your site. Themes that don’t offer this feature include a free Font Customizer plugin, which comes pre-loaded with hundreds of font combinations. With Font Customizer, no code knowledge is needed!
Check out which of our themes features Font Customizer vs. Google Fonts, and don’t miss our Help Desk article on working with Google Fonts in our themes.
font resources
Favorite Font Places
MyFonts
You Work For Them
Adobe Fonts
Creative Market (offers free fonts via weekly newsletter)
FontShop
Commercial Type
Font Squirrel (offers free fonts)
Google Fonts (offers free fonts)
Fonts.com
FontSpring
Lost Type Co-op (offers free fonts)
How To…
install a desktop font on a PC
install a desktop font on a Mac
Other Fun Resources
TypeWolf
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
xx,
