Published on | Prototyping: From UX to Front End — Medium PageCloud

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!

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.

1. 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.

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.

2. Adobe TypeKit

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 domain, 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…

3. 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.

4. 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.

5. 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, WhatFont 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. It’s a fast, efficient way to quickly find and source fonts that catch your eye.

6. 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:

7. 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.

8. 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.

9. 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.

Written by Henry Brown, Manager of Customer Acquisition at PageCloud. This post was originally published on The PageCloud Blog, where we discuss website trends, tips and tricks and go behind the scenes at the website builder you’ll love to use.

Want to read more like this?

How to Choose Fonts for Your Websites
10 Free Tools To Help Choose Colors For Your Website

9 Free Typography Tools You Need To Know was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

9 Free Typography Tools You Need To Know

Cool stuff, every week

More Articles