A Simple Guide to Google Web Fonts

Website fonts
Share on facebook
Share on twitter
Share on email
Share on print

There are thousands of fonts out there, and thousands of people who enjoy exploring their subtle differences and forming strong opinions about them. If this is you, you’re in for a treat because typography is going through a bit of a renaissance these days, and there are lots of websites and Pinterest groups dedicated to font aficionados.

For everyone else, you might be wondering what you actually need to know to pick some nice, readable fonts for your website. It’s the alphabet, right? How many possible ways could there be to display it? Well, you’d be surprised—but here’s information that can help:

The types of font and when to use them

There are lots of ways to categorize fonts. But for the purposes of creating your first website, you really need to know three broad types: serif, sans serif, and decorative.

Who’d have thought you’d spend part of your day thinking about an innovation from ancient Rome? Well, that’s what a serif is: the little tail or flourish at the end of a letter. Fonts are typically categorized as either serif or sans serif, meaning “without serifs.”

Serif and Sans Serif Font Comparison
Serifs…like flair for letters. Classic serifs on the left, sans serif on the right.

Serif fonts

Serifs are common in the world of print (remember print?) because they make it easier for the reader to follow blocks of small text on paper. You’ll likely see serif fonts in magazines, books, and newspapers. Some classic serif fonts are VollkornMerriweatherEB Garamond, and Libre Baskerville.

Sans serif fonts

When people started to read more on computer screens, type designers created sans serif fonts. They ditched the flourishes and instead favored fonts with a modern, simple look that displayed clearly as pixels rather than ink. Some popular sans serif fonts are Open SansRobotoLato, and Ubuntu.

Decorative fonts

Then, there are decorative fonts. This is a very broad category that includes more artistic fonts, script, handwriting, etc.  Think of them as the vivid orange or bright yellow of the font world—these tend to have the most personality but need to be used sparingly.

Many decorative fonts were created for their graphic appeal, and not to be super-legible in paragraph form. That’s why they are best for headings and short phrases but not for body text. In other words, if you have an entire paragraph in cursive on your website, your visitors are probably having a tough time reading it.

Here are examples of different Jimdo websites and the Google web fonts they’re using:

Am example of a website using the font Abel
Font: Abel
An example of a website using Fonts Diplomata SC and Doppio One
Fonts: Diplomata SC and Doppio One
An example of a website using Fonts Poppins and Merriweather
Fonts: Poppins and Merriweather

Where to use different fonts on your website

When you’re designing your website, we usually recommend choosing 2 or 3 fonts:

  • One for your body/paragraph text: You can’t go wrong with a sans serif font in your Text Elements that’s very legible, especially at smaller sizes. Steer clear of cursive or all-caps fonts, which get tough to read in more than a few words.
  • One for your headings: Here you can use something more decorative or fun because you’ll only use it for short pieces of text. You could also use an all-caps font. Choosing a unique font here can help add personality to your website.
  • One for your navigation menus & buttons: You can repeat one of your first two fonts here, or choose a third complementary font. Just remember that your navigation menus and CTAs must be easy to read, so we recommend steering away from cursive or overly-stylized fonts. Like with your headings, you can use an all-caps font here.
A sample website using the Font Raleway and Sacramento
This sample website uses sans serif font Raleway for the navigation menu and body text, and decorative font Sacramento for the headings.

Overall, make sure you find a good balance. There’s nothing wrong with choosing just one font for your website and differentiating your headings and body text using size and color instead.

Can you use more? That’s a little trickier. Fonts create consistency and hierarchy throughout your website. If you use lots of different fonts, it’s like having too many street signs at one intersection. It also takes away from the brand effect you’re trying to achieve.

The psychology of different fonts

People have certain reactions and emotions for different colors, and the same is true for fonts. They may just be letters, but we’ve been trained to have pretty strong associations with different fonts even if we don’t consciously think about it.

If a font doesn’t match the message or brand of a website, it will look “off” to viewers. For example, think if you had a website for accountants that used the font Amatic SC, which has a more hand-written, homemade, casual feel. That’s a vibe you probably don’t want to get from an accountant.

Psychology of Fonts

Or how about an art studio for children that uses a traditional, more serious font like Libre Baskerville…

Psychology of Fonts

…versus a font that would fit the brand personality of a kids’ studio a bit better, like Londrina Sketch.

Psychology of Fonts

This is where choosing a font is a little bit more art than science. On the plus side, if you have a gut feeling about a font and whether it’s right for your website, you’re probably right.

Choosing fonts that go together

When you’re pairing fonts, you’re trying to introduce both unity and variety.

In other words, you don’t want fonts to be so similar that they look too much alike (thus defeating the purpose of using different fonts). You also don’t want them to be so completely different that they clash or look like they come from entirely different worlds.

Here are some different font matching strategies:


If you choose a really strong decorative font for your headings, you might balance it with a simple sans serif font that won’t compete for attention.

Pacifico paired with Roboto
Contrast: Pacifico paired with Roboto


Fonts can be modern, bold, soft, luxurious, playful; and these font “personalities” should reflect the personality of your brand. If you’re going for, let’s say, a more feminine look for your website, you may choose two fonts that share that personality, even if they look different.

Dancing Script & Josefin Sans
Personality: Dancing Script & Josefin Sans

Time period

Many fonts make historical references. If you’re looking to evoke a certain era, you might choose two retro fonts or two old-world fonts.

Vollkorn & Quattrocento
Time Period: Vollkorn & Quattrocento


Font concordance is a little harder to spot than contrast, but similar proportions or similar letter shapes can help two fonts go together. Fonts from the same family (like Roboto and Roboto Slab) will share similar traits.

Droid Serif & Droid Sans
Concordance: Droid Serif & Droid Sans

Where to find perfect Google font combinations

If you’re a believer in the wisdom of crowds, there are lots of sites that recommend font pairings so you don’t have to create them yourself.

  • 25×52 Initiative: This ongoing project offers beautiful font inspiration with passages from Aesop’s Fables set in different Google font combinations. It’s fun to scroll through even if you’re not looking for new fonts.
  • Google Web Fonts Directory: Along with a nice filter and examples, Google’s directory offers popular pairing suggestions for each font in a column on the left side.
  • Fontpair: This handy website has a pretty good list of font pair recommendations, sorted by type (e.g. Serif/sans-serif, Cursive-serif). Even better, you can type your text directly into their website to see how it looks with each font combo.
  • TypeConnection: Want to have a little bit more fun with this? Type Connection sets up your font search as a dating game so you can practice picking out good matches.
A screenshot from font pairing website TypeConnection
If you want to learn more about pairing fonts, check out TypeConnection—they’ve turned it into a dating game.

Finding fonts from other websites

What if you happen to stumble across a website using fonts you just love? Well, you’re in luck, because it’s easy to look under the hood and see which fonts they are using.

Both Chrome and Firefox offer plugins that will tell you the exact fonts you’re seeing. WhatFont and Fontface Ninja are both great options. Turn the plugin on, then click on the text you’d like to know more about. The font name, size, and spacing will then pop up!

Font Face Ninja
Love the look of a certain font on your favorite website? Font Face Ninja will tell you what it is and what size and spacing they’re using.

Final tip: readability always beats design

Google offers hundreds of web fonts, but that doesn’t mean that they are all good for websites. If you suspect a font might be too hard to read, it probably is, even if it’s a font you really really love.

Also remember that with fonts, well…size matters. For body text, your font should typically be at least 16px large. But this rule really depends on the font you choose, since some fonts appear much smaller than others, even if they are the same size.

Look at your website on different-sized screens to be sure that people will be able to easily read what you wrote. Decorative fonts will usually need to be much larger in order to be legible, for example.

Bench Nine Ubuntu Font comparison
Fonts BenchNine, on the left, and Ubuntu, on the right, are both shown here at 16pt, but with dramatically different results.

As in real life, there’s no “perfect” font or perfect font pairing. If you find a font combination you like, and it’s readable, go with it, and have fun!

Bring your business online with Jimdo.

Maggie Biroscak
Maggie is a writer and editor for Jimdo. In her previous work, she edited for organizations covering the environment, cities, and sustainable business. When she’s not adding serial commas, you can find her camping, cooking, or reading science magazines.
Matching Product

Jimdo Website