b'

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!

How to Display Fonts on Your Website

In 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 

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.

To help you choose the best fonts for your website, our expert designers have handpicked the top 50 Google Font pairings based on your unique style.

Some website builders allow for a quick and easy HTML copy and paste, or drag and drop, for maximum efficiency.

Adobe Fonts

Adobe Fonts, (previously Typekit) provides a collection of +14,000 stunning fonts. The new and improved service now provides Creative Cloud subscribers subscribers with easy access to their entire library of fonts through the click of a button. Unlike Typekit, Adobe Fonts has removed limits on page views and has made all their fonts accessible for both desktop and web use.

Note: Creative Cloud Subscriptions (with Adobe Fonts) start at $20,99 /month.

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

Myfonts’ What the Font tool offers a database search based on an image of a font, along with suggestions for taking the best screenshots.

In case the image service doesn’t work, What the Font also has a forum full of typeface experts for tougher fonts.

Identifont

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.

WhatFont

Independent developer Chengyin Liu created the WhatFont app (Bookmarklet, Chrome Extension, or Safari Extension) so everyone can easily figure out a website’s fonts. He also created a mobile app.

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.

Type Sample

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

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

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.

Final Thoughts

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.

As you experiment with all your new fonts, you can manage them either through your web services, or locally with services like FontBase, or Typeface.

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.

'