12 Best Google Fonts for Websites (and Best Practices)

Last Updated on January 12, 2023 by 5 Comments

12 Best Google Fonts for Websites (and Best Practices)
Blog / Design / 12 Best Google Fonts for Websites (and Best Practices)

When creating a website, font choice is an important aspect of the overall look and feel of your site. Fonts need to be easy to read, but also aesthetically pleasing. If you choose the wrong font, it can disrupt the user’s experience, and actually make your content hard to read. Thanks to Google, there are plenty of font choices available to you. Since its launch in 2010, Google fonts have come a long way from its 19 font offerings. There are now over 1450 choices currently available, so picking the right fonts can be daunting. In this post, we’ll make your life a little easier by providing our list of the best Google fonts to use on your website.

What Are Google Fonts?

Google fonts

Google Fonts are a collection of high-quality web fonts for use on web projects. Additionally, all fonts can be downloaded for installation on local systems. Fonts are pulled into your website through Google’s content delivery network (CDN) and will load automatically once installed.

Why Should You Use Google Fonts?

All of the fonts are free for commercial use, so they can be used in both web and print projects. Additionally, all of the fonts are updated automatically, so there’s no need to worry about keeping things updated manually. Once installed on your site, there’s nothing more to do. As previously mentioned, there are tons of options with over 1450 font families. Lastly, Google fonts offers multi-language support, so if your site has more than one language installed, you’re good to go.

12 Best Google Fonts Available (And They’re Free!)

With so many options available, it can be a bit overwhelming to know which fonts to choose for your website. Thankfully, we’re going to help you determine the most popular and trending font families for you to use on your website. Let’s get started.

1. Roboto

Roboto font

Roboto is considered a dual-purpose font, and is the most popular Google font available. Geometric in shape, it also has nice curves and is generally considered very easy to read. It has been used as the typeface for Google’s Android operating system since 2014.

Get the Font

2. Open Sans

Open Sans font

Open Sans boasts a user-friendly, ultra-readable appearance. It’s great for both headline and body texts. Because of its ease of readability, it is used as the default font in the Divi theme.

Get the Font

3. Montserrat

Montserrat Google font

With over 30 styles, Monsterrat is quite versatile. It was inspired by artwork seen in the historic Montserrat neighborhood of Buenos Aires during the first half of the 20th century.

Get the Font

4. Lato

Lato Google font

Google describes Lato as a “serious but friendly” font. Polish for summer, Lato is a multi-purpose font that is generally easy to read and invokes feelings of summertime playfulness.

Oh, and by the way, we use it on our blog.

Get the Font

5. Poppins

Poppins Google font

Poppins is a rounded, widely popular font that is suitable for both heading and body text. Developed in 2014 as an open-source font, Poppins is based on the Devanagari and Latin writing systems.

Get the Font

6. Source Sans Pro

Source Sans Pro

Released as Adobe’s first open-source font, Source Sans Pro is suitable for all user interface designs. It is quite versatile and pairs well with other fonts on our list such as Montserrat, Open Sans, and Work Sans.

Get the Font

7. Raleway

Raleway

Thin and elegant, Raleway is a display font typeface well-suited for headings and subheadings. Initially developed in 2012 as a single thin font, it has expanded to include 9 variances.

Get the Font

8. Noto Sans

Noto Sans

Noto Sans is quite robust with its 18 font variances. In addition, there are more than 3,700 glyphs available with this incredible typeface. With over 18 variances including multiple weights, widths, and italics, Noto Sans is suitable for just about any design.

Get the Font

9. Inter

Inter Google font

Designed specifically for computer screens, Inter is the newest font on our list. Initially released under the name Interface, Inter hit the scene in 2017. It is frequently referred to as a cross between Helvetica and San Fransisco Pro.

Get the Font

10. Roboto Slab

Roboto Slab

Based on the widely popular Roboto, the Slab variation is available in four weights – thin, light, regular, and bold.

Get the Font

11. Merriweather

Merriweather

As one of the only serif typefaces on our list, Merriweather is playful, yet serious. It features tall letters that are condensed, yet easy to read on all screen sizes. There is also a Merriweather Sans font available that pairs well with its serif cousin.

Get the Font

12. Playfair Display

Playfair Display

Playfair Display exudes old-world style, yet exhibits a modern flair. It’s best suited for headings due to its commanding appearance. When using Playfair Display, consider pairing it with an easily readable sans serif font such as Roboto, Open Sans, Work Sans, or Lato.

Get the Font

Best Practices For Using Google Fonts in WordPress

Using Google fonts is fast and easy, but some things should be considered to keep your site running smoothly and fast. To make the most of using these fonts, site optimization is key.

Only Use the Fonts You Need

When considering site speed, you should generally only use two or three font families on your site. Font families consist of all iterations of a font. For example, if you install the Montserrat family on your site, you’re installing 8 fonts. Font families contain all instances of a font type, which may include different weights (regular, medium, semi-bold, bold) and transformations including italics.

Use a Typography Plugin

It’s a good idea to use a typography plugin to manage the fonts installed on your website. Some themes such as Divi have typography management built into their framework. Typography plugins can help you manage not only your fonts, but typefaces, icons, drop caps, and more.

Choose Good Font Pairings

Google font pairings

When choosing fonts, try to choose fonts that work well together. Additionally, you should pair serif headings with sans-serif body text. This is because using two serif fonts together makes your text hard to read. Alternatively, it’s acceptable to use two san serif fonts together, or even different weights in the same family. If you’re not sure what font pairings to use, you can use a handy browser extension like Fontpair to make it easier to find what fonts a website is using.

Use Self-Hosted Google Fonts

If you choose not to use a typography plugin on your WordPress site, you can host the fonts on your own server. The process is fairly simple to achieve in a few steps.

The first step is to download the font. Choose the font you’d like to download, then click the Download Family button in the top right-hand corner of your screen. Keep in mind that when you download the font from Google, you are automatically agreeing to their terms of service.

Once the fonts are downloaded, you’ll need to move them to your project. For this example, we’ll use Mamp to upload them to the Twenty Twenty theme.

When placing the font files into your project, be sure to take note of the file location. You’ll need to add it via CSS in the next few steps. To access the fonts for your theme, navigate to /wp-content/themes/twentytwenty/assets/fonts/. If you are using a different theme, replace twentytwenty with your theme’s name. Drag your downloaded font files (including the folder) into the fonts folder on your WordPress sites.

twenty twenty font folder

Next, locate the downloaded font and drag it into the assets/font folder of your theme.

drag font into folder

Adding the CSS

Next, we’ll need to add a bit of CSS to the theme’s customizer for our font to be recognized. Navigate to Appearance > Customize.

theme customize

Click Additional CSS in the customizer to open the CSS input area.

additional CSS

Next, add the following code into the Additional CSS area:

@font-face {
    font-family: Roboto;
    src: url(/wp-content/themes/twentytwenty/assets/fonts/Roboto-Regular.ttf);
    font-weight: normal;
}

To use your new font, simply reference the font using CSS. You can use the browser inspector tool to apply the font to whichever CSS class you like. In this example, we want the site title, as well as the page content to use our new font. For this example, input the following CSS:

.entry-title a {
font-family: "Roboto", Arial, sans-serif;
}

.entry-content {
font-family: "Roboto", Arial, sans-serif;
}

Click Publish to save your changes.

publish css to site

For more, check out how to use downloaded fonts in WordPress without a plugin.

Limit Font Weights

Similarly to keeping your font families down to a minimum, you should limit the number of font weights you use on your website. If you only plan on using regular, medium, and bold, there’s no good reason to include 18 variations of a font. Calling on Google to deliver extra font weights that aren’t being utilized will only increase the time it takes to load the fonts from Google’s servers.

Using Google Fonts in Divi

Divi by Elegant Themes

Divi makes Google fonts available by default. Fonts are available in any module that has text. You can choose from hundreds of web fonts from the Google font library.

In the Divi theme options, you can choose to enable Google Fonts, along with font subsets.

Divi theme options

Thanks to Divi’s font search feature, it’s easy to search for and find any Google font that you wish. Another great feature of Divi is the ability to view recently used fonts at the top for easy access.

Divi recent fonts

You can also enter the Google API key so that Divi stays up to date with the latest versions of fonts, as well as any new ones that are added in the Google font repository.

Final Thoughts

Picking the right font for your website can be an overwhelming process due to the many hundreds of options available to you. Just remember to pick a font that is easy to read, and looks good with the mood of your design. Pair fonts that complement each other, and try not to use too many fonts.

What are some of your favorite Google fonts? Let us know in the comments section below.

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

How To Design Websites In 2024 (Tips & Tricks)

How To Design Websites In 2024 (Tips & Tricks)

Posted on November 21, 2024 in Design

Learning how to design websites that work isn’t only about having an eye for design or chasing trends. It comes down to essential principles that the best-performing sites share. Get these right, and everything else falls into place. In this post, we’ll try to help you understand the...

View Full Post
How To Approach Small Business Web Design (2024 Guide)

How To Approach Small Business Web Design (2024 Guide)

Posted on November 15, 2024 in Design

Remember when having a website was enough? Now, your competitors have online booking, instant quotes, and slick mobile designs. What if building a business website was actually straightforward? This comprehensive small business web design guide cuts through the confusion, showing you exactly what...

View Full Post

5 Comments

  1. I think what else needs to be addressed here is that the local fonts downloaded/installed and fonts directly linked to a CDN (i.e., Google), the output of the fonts are different visually in weight and style (this comment is in support of both Oliver’s and Mel’s comments above). It amazes me still that Divi has a heavy reliance on the Google CDN for fonts. If compliance and pagespeed are of any factor, I would rather download the fonts locally instead of having to connect to Google’s CDN for every pageload.

    What’s more, even though Divi sells the idea that you can use Presets for global settings for their modules, it’s time consuming. It was easier to use WordPress’ old Customizer to set a font and size for headings and body text: done. Then you just used Divi to fine tune certain areas. I find myself spending an hour going through all of the modules just to set “defaults” using the Presets.

  2. It just would be nice if the mentioned fonts would work properly with Divi, because they don’t. Lets take Roboto for example. If you set the font weight to regular or medium – nothing changes in divi – they both have the same font weight (500). But it should be 400 for regular and 500 for medium. And that happens to a lot of the fonts named here. Sad to see this problem hasn’t been updated, even if it is a known bug since over 4 years.

    Second of all the divi “built in” use of Google Fonts doesn’t downlad the fonts. Which means there is a connection to Google. This is highly against GDPR Compliance, if there is no active user consent. It’s crazy to not mention it in this article.

    • +1

    • This!!!

  3. This post should address that Divi’s settings allow you to upload a Google font for a text module and then make it the default for all text modules, but you still need to do the same for blurbs, sliders and every other module under the sun.
    Divi is in desperate need of a CENTRALIZED font management system where you upload and set the font ONCE and then you’re done. Ideally with auto-scaling depening on viewport width (very easy to do with the clamp function) and a way to handle exceptions (like changing the font size if the font is used in a 1/3rd module (make it smaller), etc.)

    Divi is rather behind when it comes to this topic when comparing it to other themes out there. 🙁

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today