Over the past few years, Google Fonts has grown and evolved into one of the top sources for typefaces. It’s free, it’s easy — and it’s loaded with fonts of mediocre quality. (We’re web designers — we’re allowed to judge.) That said, it’s popular for a reason, and there are some really nice options available.
In the old days, there were but a few different ways to get your typefaces. You could spend thousands of dollars on officially sanctioned collections from the big font foundries; you could traffic in the seedy world of free downloadable fonts, which often featured free viruses as well; or you could simply “borrow” fonts from a friend, coworker, client or vendor. After all, who’s gonna know?
Thankfully, Google Fonts presents a great option that works really well in many situations — an option that designers are turning to with increasing regularity.
What Is Google Fonts, and Why Use It?
Google Fonts is a large library of free-to-use fonts that you can download or load straight from Google to use on your own website. They have a variety of fonts, styles and weights available, and their collection continues to grow.
There are a number of enticing reasons to use Google Fonts.
- It’s reliable and tried-and-true.
- Since they’re free, you don’t have to pay to use the font on your site. That can save you a lot of money compared to commercial fonts that require a one-time fee, price per year or even charge based on your traffic.
- If the font your brand uses has a subscription for online use that your company can’t afford, you can often find similar alternatives from Google Fonts.
- Because Google tells you the impact on speed from your selections, it encourages you to make good choices. You don’t want to use every font weight on your site, and you shouldn’t. But without someone to tell you otherwise, it can be easy to upload all of them without a second thought!
- It’s easier to experiment. If your startup hasn’t decided on fonts at all yet, Google Fonts can be great for testing combinations. You don’t have to commit and can easily swap one out if you change your mind.
Google Fonts and Page Speed: What You Need to Know
Whether you load the fonts from Google’s server or your own, it’s still going to impact how quickly your site loads — but that doesn’t mean you can’t minimize the impact.
- Load only the absolute minimum number of fonts and weights that you need.
- Load the fonts and weights in a single call. Google lets you list multiple fonts at once, separated by a vertical line (|). If you load each in its own individual import script, this creates more work for the server as it loads them one at a time.
- Google’s import script is render-blocking. That means it blocks the rest of the page from loading until the fonts load. Loading the font with Javascript from the footer of your page instead of the head will help, but there are even better alternatives. For best results, use Web Font Loader or a WordPress plugin such as Easy Google Fonts or TK Google Fonts.
How Many Fonts Are OK?
Avoid picking more than three fonts. One font for headlines and one for body is usually all you need, and this rule applies to print material as well. Browsers can do a pretty good job of rendering italics and a bold weight without you having to load those as well. Unfortunately that isn’t always the case; some fonts you will want to load a “black” or “extra bold” weight to use in place.
In those instances, be particular and only load the one additional weight you need. If both the bold and italics rendered don’t look good, try using only the bold and avoiding using italics altogether. Does it really need to be italicized? Or can it be bolded, highlighted or underlined instead?
Be critical and minimalistic about how you approach fonts. You will not only keep your page loading time lean, but you’ll keep your design clean as well.
The Best Fonts of Google
These fonts are free because they’re the JV team, but that doesn’t mean we can’t find some great players among them. Here are our favorite diamonds in the rough — the best Google Web Fonts available.
The Best Sans-Serif Fonts
Like Myriad? Then you’ll love its free doppelgänger Source Sans Pro, with its wide variety of weights and great readability at any size. Being used in over four million sites, it has to be good.
A thoughtfully-designed and well-balanced geometric sans typeface. It may not be as popular as some others on this list, but Poppins has wonderful multilingual support if you need it.
Available in a host of styles and weights, Lato lends a modern, friendly look to text of any size. No wonder eight million sites use it!
A humanist sans which includes a broad range of special characters and plenty of weight options. A safe, can’t-go-wrong choice, Open Sans is the most commonly used font on this list at over 18 million.
Raleway offers a more unique sans-serif look, with its especially distinctive w’s. We’d recommend using it in headlines and other large type, as its not as readable in body text as the others on this list.
The Best Serif Fonts
Lora is a workhorse serif font that works well in almost any situation, but especially as easily readable body copy. It sports a balanced look with roots in calligraphy for a light human touch.
A great body copy font with some old-world flavor, Alegreya has nice bold versions for headlines to boot and is featured in over 250,000 websites.
A readable serif font in the classic vein, Merriweather is ideal for body copy. It’s used by over three million websites and popular in many countries.
This slab-serif typeface is great on its own, but can be used along with its extended family as well, which includes Roboto (the sans-serif base variant), Roboto Condensed and Roboto Mono. While not used as much as Merriweather, Robot Slab is a good pick across other countries too.
A strikingly elegant and readable option that works best for big headlines, this choice is versatile enough to use throughout a project. Playfair Display is immensely popular, used in over three million websites.
The Best Decorative and Specialty Fonts
A sans-serif font with a modern, even futuristic, look that’s distinctive enough to list it here rather than with the more run-of-the-mill sans typefaces. Given its specific look, Exo is not widely used — which might be what you’re looking for.
A distinctive, versatile and well-balanced typeface for bold headlines. Abril Fatface even supports over fifty languages.
A perfect name for this font which softens a hard graphic look with a more casual and feminine handwriting style. If you’re looking for an off-the-beaten-path choice, Architects Daughter is the least used font on our list.
Plenty of ligatures and alternate characters make Lobster a beautiful, bold and fun script font.
If you’re looking for maximum impact from your headlines, you could do a lot worse than Ultra. This mega-bold, woodcut-esque, slab-serif typeface packs a lot of punch.
Font Combinations: What Works
When choosing a font combination, pay attention to what purpose you’re using each font for and how they will work together. For body text, readability should be your primary concern – avoid cursive, rough handwriting, and other heavily decorated fonts. Sticking with a basic serif or sans-serif font is safest. For your heading font, you want one that contrasts as well as compliments. If your body font is sans-serif, try a serif font for the headline, or vice versa. If your body font is thin and light, you might want to pair it with a bold font. Here are some examples from our collection of best fonts:
Lobster is bold and distinct, giving a nice cursive flow to the headline. Source Sans Pro supports it by being a neutral sans-serif font, allowing Lobster’s distinctive flavor to do the heavy lifting.
Lato supports the classic authority of Merriweather without getting in the way.
Using the heaviest weight for Poppins as the headline and a lighter weight for Roboto Slab creates a look that feels both modern and friendly.
We might not normally pair two serif fonts together, but using Abril Fatface as a large and bold headline can still effectively contrast with Alegrey’s lighter and more consistent look.
Architects Daughter gives the headline a bit of a fun, artsy pop, but Open Sans keeps the primary text legible — exactly as it should be.
For more font pairing ideas, fontpair.io has their own list of recommendations or use font-combiner.com to mix and match live. Google will also give its own suggestions.
Fonts Beyond Google
Of course, you’re almost always going to get the best quality if you go to the pros and pay for your fonts. Beautiful, professional fonts designed by the best type foundries can be downloaded in minutes from sites like MyFonts.com or FontShop.com, at only a fraction of what they used to cost.
You still want to be cautious of load time and file sizes, but font foundries will give you optimized files for any format. Since these fonts aren’t as widely used as those Google, you can be sure your site will have a unique touch others lack.
The old adage that you get what you pay for certainly applies in the typeface market. For top-notch, well-constructed fonts, there’s still no substitute for shelling out a few bucks for the best. If brand consistency is a priority and your business has the cash, always get the web versions of your brand fonts and use them over a free alternative.
If the budget isn’t in the cards, you can probably find something pretty close to it for free on Google Fonts. And for those projects that don’t require that amount of finesse, you can be sure Google will be there in a pinch to get something presentable together fast.
But whether you decide to browse the vast collection of free fonts are pay for something special, always choose your fonts with care.
