It’s always fun to discover new fonts, and it’s the BEST when you discover one that you know is meant to be your new signature font for your brand or blog (or even your e-mail signature!). However, it’s not always a super straightforward process to go about actually choosing & using the right fonts for your project anymore. In fact, just the other day, one of my clients asked me to find a font that would work for both her website headings & in her printables, and my reply was SO long it could have easily been a novel.
I’m sure there are others out there who are just as confused as I once was, so I thought it was about time I finally wrote a mini guide on the subject to share everything I know with you about choosing & using web fonts for your blog or website. Let’s start with the basics…
Web Fonts vs. Desktop Fonts
The first thing that would be helpful to understand is that there are two main types of fonts. There are web fonts – which can only be used on your website, and then there are desktop fonts – which can only be used on your computer in applications such as Microsoft Word, Pages, or the Adobe Creative Suite. If you have a business, chances are you’ll want to get BOTH types of fonts so you can make your branding cohesive across all channels and platforms (like your website & business cards or any other printed materials you might want to have in the future).
The only problem? Not all web fonts are available as desktop fonts, and not all desktop fonts are available as web fonts, which means you could very well find the perfect font for your logo or business card, but not be able to use it on your website (or vice versa)! It’s super easy to fall down the rabbit hole and get lost in an endless maze of fonts to the point where what you’re typing doesn’t even look like a real word anymore, which is why it’s SO important that you have a solid plan in place before you start getting lost in font la la land.
My tips for choosing the right font:
1. The most important thing is legibility. Can we even tell what it says – easily, without squinting? If we can’t, then what’s the point of writing anything at all! Overly decorative fonts may have their place elsewhere, but make sure you choose one that displays your brand name or message PROUDLY, not cryptically.
2. Choose a font the same way you would approach dating. Know what you’re looking for! Like I said, it’s easy to get carried away by the lustful beauty of a new font discovery, so make sure you go into the process with your primary aims in check (i.e. How do you want it to make people feel – and based on that answer, do you want script, or serif, or handwritten calligraphy? Is having no web font a complete dealbreaker for you?). Then, whenever you find a font you *think* you adore, and you’re wondering if it’s “the one”, ask yourself if it’s just because it’s super trendy right now, it happens to feature a beautiful masterpiece of an alphabet, or because it’s *actually* perfect for your blog/brand/project!
3. Always make sure you understand exactly what you’re buying! Is it available in all of the file types you need? Does it come with bold, italic, or any other stylistic alternates you may want? Are there any licensing fees required – and if so, what are the terms of the license? How much will it cost to get all of the weights & styles you need in all of the formats you need? Do you have a plan of how you’re going to install it?
Ok, so now that you’ve learned the basics, where can you find the best font options online?
Where to find web fonts & desktop fonts online:
- MyFonts.com* is the best place to get beautiful, premium fonts, in my opinion, because they usually provide both the desktop and the webfont versions side by side in their online catalog, so you don’t have to go on a wild goose chase to locate them both. They also have loads of font choices to choose from (with new ones being added constantly), and each font is professionally crafted, so you know they will look crisp & clear no matter how you decide to use them.The only downside? The fonts here can be a bit more difficult to install without some more intermediate knowledge of web development, and they can be much pricier than other places. You should expect to pay anywhere between $0 – $100’s for both versions depending on how many different font weights you want to purchase (i.e. bold, semibold, italic, etc.).
- Typekit is an awesome font subscription service that is now provided free with subscription to Adobe Creative Cloud. It allows you to not only sync premium fonts to use on your desktop, but also often provides the webfont versions too. It’s actually pretty awesome and very easy to use, so if you are a current Adobe subscriber, you have definitely got to check it out!
- Creative Market* has a lot of really beautiful & trendy choices to pick from, and with some reasonably affordable prices, however not all desktop fonts are available as a web font, and the web fonts are not always available as a desktop font, which can be somewhat frustrating! If you are going to be looking for both versions, be sure to check the file types carefully and ensure that the listing states they are available as a Vector, TTF, or OTF (which are desktop fonts) as well as CSS versions (web fonts). You can also search primarily for fonts that include Vector & CSS files by clicking on the “Filter by” dropdown from the main Fonts page!
- Google Fonts has by far the easiest fonts to install to your website, and best of all they are FREE, but there aren’t a ton of options to choose from that haven’t been already used by everyone else a million times. They also do NOT provide desktop versions, however you can usually find most of their fonts as desktop fonts elsewhere with a quick Google search.
- FontSquirrel is a site that provides a ton of free fonts, and many of them are also available as web fonts, too. Even more interesting, they have a free web font converter that allows you to upload desktop fonts and convert them to web fonts, although I am not certain how legal this actually is, so be VERY careful which fonts you choose to convert! (For instance, I would avoid converting any fonts that normally come from a big font foundry for hundreds of dollars, as they have rules against using their web fonts without purchasing a license.)
- DaFont.com is the go-to place for 100% free desktop fonts. They are not always high quality, and they do not provide any web fonts here, but this can be a great font source for creating a low cost logo if you won’t need to use the font directly on your website (for body text, headings, and such).
- iFontMaker is an ahh-mazing iPad app that allows you to make your OWN fonts using your handwriting! This is a great tool to use if you are artistic and want to put your own custom stamp on your branding materials. This app is actually the main reason why I even got an iPad in the first place, and I’m glad I did! It’s so much fun to make your own fonts, and you can even name them whatever you’d like & send it to your computer directly from the app to use as a desktop font. Another bonus? Since you create the fonts yourself, you are 100% authorized to convert them into web fonts using the tool on FontSquirrel I mentioned aboved.
Installing Fonts
The installation for desktop fonts is actually quite easy (as I’m sure you’ve probably already figured out!) – you just double click on the downloaded file, press ‘Install’, and you’re pretty much ready to start using it on your computer. But with web fonts… it can be a whole different story, as each font platform has it’s own “proprietary” way of doing things. If you are not extremely tech savvy, or if coding scares the bejeezus out of you, I would HIGHLY recommend hiring a trusted web developer to save you the hassle (and the very real possibility of either temporarily or *gulp* permanently messing up your entire site!).
If hiring out is not an option for you at the moment, or you feel comfortable enough digging through the back end files of your website on your own, each font provider will usually have their own set of instructions on how to install them, and some providers (like MyFonts & Google Fonts) even provide the exact code you can put in to make them show up properly on your site. You will definitely need to have at least some experience adding code to your header.php file as well as your CSS file to do it yourself.
Whew, that’s it from me! This mini guide may have turned into yet another novel, but hopefully I’ve helped you get a better hold on how the whole system of choosing & using a font really works, so that now you can know exactly what to look for & where to turn to quench your next font fetish (or at least know know what to ask for if you ever need to hire someone to install a webfont for you!).