As I write this, there are just over 26,000 webfonts on MyFonts.com. New ones are cropping up every day.
That’s quite a leap from the early days of HTML, when browsers could only display a few fonts like Arial, Helvetica, and Times New Roman.
Fortunately, amidst the thousands of fonts, there are also several resources that filter fonts, spark your imagination, and connect you with the best ones for your website.Whether it’s displaying fonts, identifying the fonts you love, or figuring out how best to combine your typeface choices, working with fonts can be easier — and cheaper — than you might think. Let’s dive right into it!
The 9 Tools
Spoiler Alert: If you’re already in design, you’ll likely know how to display webfonts — so skip ahead to #3!
- Google Fonts
- Adobe Typekit
- What the Font
- Type Sample
- Canva Font Combinations
How to Display Fonts on Your WebsiteIn order to use beautiful fonts on your site, you need to find them first. Conveniently, there are two major databases full of magnificent, beautiful fonts, and they are both easy to access and use.
Google Fonts has over 800 fonts that are free to use, and they host the actual fonts — which means you can display them across your sites with minimal bandwidth issues. You can plug your new, open-source fonts into your site very quickly and easily.
Some website builders allow for a quick and easy HTML copy and paste, or drag and drop, for maximum efficiency. Check out Type Hero, a tool that enables you to test out any Google Font with more white space and customizations.
Adobe’s TypeKit collection is extremely powerful, with many more fonts to choose from than Google Fonts. In order to access the database, simply create a TypeKit account, build your kit, and select the fonts you’d like for your site.
Once you name the kit and attach your domains, you’re good to start working with TypeKit’s fonts. Then it’s a simple matter of embedding the code on each page that requires the fonts (similar to Google Fonts).
How to Identify Fonts You Like
If you have a cool font idea in mind, the odds are that you came across a site that uses it, but you might not know what it’s called, or where the typeface comes from. Fortunately, there are resources available to help sift through the murk and solve this issue…
What the Font
In case the image service doesn’t work, What the Font also has a forum full of typeface experts for tougher fonts.
With a comprehensive set of search functions, Indentifont offers to help you find your typeface by looking at names, similar fonts, appearances, pictures, or publishers. Identifont lists their most popular fonts, as well as newer typefaces.
If you have an idea for a font you want, but not the actual typeface, this handy search engine might be worth your while. Be sure to check out their free fonts section, too.
The tool is simple: Click the section with your mystery font, and the tool will tell you its name. Additionally, this tool will tell you the family that the font is from, so you have to option to search a collection related to a font you like rather than taking directly from it.
In recent updates, WhatFont now displays the font provider, like Google Fonts or Adobe TypeKit, to further ease the process. This tool is a fast, efficient way to quickly find and source fonts that catch your eye.
Similar to WhatFont, Type Sample allows for painless identifying and sampling of webfonts through a bookmarklet or an extension. This tool can be used for casually pinning fonts you like as you browse, just to make sure that you don’t forget any of your favourites.
How to Pair Fonts Together
Matching fonts up is no easy task. Whether you want to stick with the same font families, or match serif and sans, the possibilities are endless. We’d previously talked about pairing fonts, but here are some tools to make the pairing process easier:
MixFont pairs random fonts with each other to give you an idea of how they might work together. The site’s generated pairs can be somewhat eclectic, but it’s got an easy swap tool and embedding devices in the toolbar.
MixFont also has a rated collection of the most popular pairs, for your browsing pleasure. So if you’re stuck, pick your initial fonts and see what MixFont suggests.
Canva Font Combinations
Canva’s Font Combinations draw inspiration from around the web. Based on the initial font you select, the tool picks a set of possible matches and corresponding sample screenshots as evidence.
The combination might not be what first comes to mind, but might give you an idea or direction for future use.
Typ.io is a database of other designers’ font pairings, and it’s a great source of information and inspiration for finding out which fonts work well with others.
Think of it liked a crowdsourced version of Canva’s Font Combinations tool.
Don’t get caught up by the sheer volume of new fonts.
Leverage these tools to make the most of your time and help you make smart font selection choices with the experience these sites will bring to your design game.
Be creative, take your time, and have fun customizing your website’s typography!
Frustrated by font management when building websites? See how PageCloud makes adding fonts to a website as easy as copy + paste. Start your free trial today.