Don't worry. It's not as complicated as it seems.
In this guide to fonts, we're going to cover: TTF vs OTF, desktop vs web fonts, PU vs CU fonts, where to get free fonts, where to buy fonts, and some frequently asked questions.
I promise to take it slow and walk you through everything.
TTF vs OTF, WTF?
We're talking types of fonts here. Let's take a look at the definition of these acronyms, shall we? In lay(wo)man's terms.
TTF: TrueType Font
TrueType fonts are normal, basic fonts. They have a .ttf file extension. TrueType fonts can be easily scaled to any size, work on both Apple and Windows machines, and also work well on the web.
TrueType fonts work with all Adobe programs, as well as Word and most other programs on your computer. They include all the standard characters necessary for print and web.
OTF: OpenType Font
OpenType fonts are modern, fancier fonts. They have an .otf file extension. OpenType fonts can do everything TrueType fonts do, but they have a few bells-and-whistles that make them a bit smarter. OpenType fonts can include extra characters, ligatures, swashes, alternates etc. that you can “swap-out” for the normal characters.
Although OpenType fonts work in all programs, in order to access all the special characters, you need to use a program like Adobe Illustrator or Photoshop CC. You'll find the alternate characters in the “glyphs” panel.
In Photoshop CC, go to Type > Panels > Glyphs Panel to reveal the character guide. From there you can access all the available glyphs. With the Type tool activated, double click to insert a character.
You can also highlight a character and select “Alternates for Selection” from the dropdown menu to reveal other choices for the letter(s) you've highlighted. This is a quick way to spruce up your typography.
Designer Tip: Use alternate characters in OpenType fonts to create unique typography for your clients.
When you are looking to buy fonts, OpenType fonts that come with alternate and extra characters can cost a bit more, but are often better in the long run because of the customization options. OpenType fonts allow you to create “prettier” typography.
PU vs CU Fonts
These acronyms refer to the license type and where you are allowed to publish graphics that include these fonts.
PU: Personal Use
When a font designer gives their fonts a Personal Use designation or license, this means that you can only use this font for personal projects.
A personal use font license means you cannot use this font for client projects. Even though you paid for it. Even if the client's site is just a personal blog, you are a business.
A personal use font license means you cannot use this font on your portfolio site, since you are selling services from your site.
Whine, cry, and complain, but follow the rules.
So, what can you use personal use fonts for? A birthday invitation that you design for your niece's princess party. A flyer that you make for your neighbor's lost puppy. Or any project that you are not paid for and is not for a business or for profit.
Basically, my recommendation is to avoid personal use fonts. Keep them off your computer and out of Photoshop so as to avoid temptation unless you are prepared and able to purchase a commercial use license.
CU: Commercial Use
A Commercial Use font means that you can use this font for your business and client projects.
However, there are still some limitations with commercial use fonts. Unless otherwise stated, commercial use fonts are only licensed for you to use on your computer. Sharing these fonts with friends is a breach of the license. As is loading the font into your website as a web font without a license. We'll talk about web fonts more in just a bit.
Most fonts include clear licensing instructions in a .txt file in their folder. If you don't see instructions, be sure to contact the font creator or foundry before using it for commercial use.
Every time I purchase a new font, I stick a copy of the original zipped folder into a CU Back Up notebook that lives in my business stack in Evernote.
Desktop vs Web Fonts
Another aspect of font licensing is desktop vs web fonts. When you purchase or download a font, unless it says otherwise, it's probably meant to be a desktop font.
You can use desktop fonts in your graphic design work, on your “desktop” or other computer. You can create a logo for a client, save it, and upload it to a clients website as a graphic. That's totally fine.
Designer Tip: You don't need a web font license to upload a typographic image to a website.
What you cannot do with a desktop license is upload the font to a website and have it display as a web font or “text” within the website. You need a web font license for this.
Web fonts are what create the text on websites. Anytime you (as a user) can highlight and copy text from a webpage, it means that text is displayed as a web font.
There are a few standard web fonts that you can safely use without a web font license, and that will display on all modern browsers. These include: Georgia, Arial, Verdana, Helvetica, Trebuchet, and Tahoma, to name a few.
The text you see in this blog post is Open Sans, a free CU web font provided by Google Fonts. Google hosts the font, and I have my child theme coded to use the font via CSS.
You can also host web fonts that you have a license for on your WordPress site. When purchasing or generating a web font package, you'll be given a folder that contains includes .eot, .svg, .ttf, and .woff fily types. Host this folder in your child theme and then use @font-face within your CSS to call the font.
Where to Get Free Fonts
The best place to get free CU fonts is Google Fonts. There are 700+ fonts to choose from in a range of styles. You can download the fonts to your desktop and use them as web fonts. All for free!
Another great place to get free CU fonts is Font Squirrel. FontSquirrel has a good selection of free CU fonts for desktop and web. Some of which are not available at Google Fonts.
There are lots of other free font websites out there, who I won't dignify by linking to. The thing about “da fonts” from these places is that they are almost entirely PU only. Sometimes, the fonts are put on this site without the creator's permission and it can be tricky to locate the creator to purchase a commercial use license.
Be smart. Either use the reputable free fonts from Google Fonts and FontSquirrel, or purchase fonts online.
Where to Buy Fonts
There are lots of good options for purchasing fonts online. Here are some of my favorites:
Along the lines of Google Fonts and FontSquirrel, there is also a subscription based program called TypeKit. Owned by Adobe, TypeKit allows you to use their available fonts both on your computer and on the web. In fact, most Adobe CC subscriptions come with a TypeKit subscription included!
I have bought individual CU okay desktop and web fonts from:
Font Deal Sites
There are a handful of deal sites that will offer font bundles for limited time runs. These are usually Commercial Use okay fonts and often will include the web font in the bundle.
FAFQ: Frequently Asked (Font) Questions
What happens if you use a font without a license?
There's no such thing as the font police. BUT if a font foundry or creator were to discover that you used a font without the proper licensing, they would have just cause to sue you, your business and/or your client. The easiest way to get in trouble is to use a desktop font as a web font without the proper license.
A friend of a friend (and no, I'm not making this up!) was caught in just this scenario last year. She was sued for using a web font on a client's site that she did not have a license for. She ended up settling out of court for several thousand dollars.
Designer Tip: Make sure that you save the receipts and original font files for all the fonts you purchase.
The best piece of advice I can give you is one that I hope I don't have to: just be honest. If you follow the rules you won't get in to type trouble.
Read more in this article on crowdSPRING.
Can I send my client a copy of the font I used in their logo?
Not unless they purchase their own license. Often times clients will ask for a copy of the font(s) you've used in their design so that they can create matching social media and blog graphics. Unfortunately, this means that they will have to buy their own copy of the font to use on their computer.
How do I install Google Fonts on my Genesis site?
Straight from the source, read this StudioPress article: How to Load Google Fonts in a Genesis Website.
Lastly, here are some fun font resources for you:
- Font Combinator: Visual builder to help you pair Google Fonts for web.
- Kimberly Geswein Fonts: Beautifully handcrafted fonts. Free for personal use, $5 each for commercial use or $299 for ALL. A great Investment for blog designers!
- Typespiration: Examples of beautifully paired web fonts from epic designer Rafal Tomal.
- What The Font: Upload an image and What The Font will help you figure out what font is used.
I learned a few new things in writing this guide to fonts for web design. Shockingly, I had no idea that TypeKit was included in my Adobe CC subscription! Nor did I realize that Photoshop CC 2105 now includes a Glyphs Panel.
It's my hope that you've learned something new too! Let me know in the comments below.
Did you like this post? Share it on Pinterest!