Scroll to top
USA
651 N Broad St, Suite 206,
MiddleTown, New Castle,
Delaware - 19709
Canada
635 Ashprior Avenue,
Mississauga, Ontario,
Canada - L5R3N6
India
34, Shiwanshu Bunglows
Vadodara, Gujarat - 390007

How to use Google fonts in WordPress (2021)

93 / 100

Are you too tired to use the same old fonts of WordPress? Want to add some personal touch to your boring WordPress site? Then you can try the Google fonts on your WordPress site. These fonts would fill life to your WordPress site. In this article, I will tell you how to use Google fonts on your WordPress site.

There is a ton of fonts out there that can surely express you better, your brand, your message – Calibri, Chalkboard, Verdana, Monaco. If you want to get all crazy, geeky, sophisticated, and a time-killer, you can surely use code to customize your WordPress blog font. But surely you have easier methods to do that as well.

How to use Google Fonts in WordPress

Why use Google fonts on your site?

The modern web is all about user experience. Companies invest a heavy amount of time and money to ensure that their website’s visitors get the best web experience while browsing through their site.

Text representation also plays an integral part in the website’s aesthetics. It doesn’t matter how good the quality of your content is; if it is not pleasant to read and is too cluttered for the readers, then all your efforts go to waste.

To win through this problem, the easiest way is to get access to hundreds of professional fonts (free of charge) is by using Google Fonts with your WordPress website.

Using a WordPress Plugin for Google fonts

Click Plugins > Add new. Enter the search phrase “Google Fonts” in the search box. Select the first result and click Install Now. Then click on Activate.

finding plugins in WordPress

On the Plugins page, search Google Fonts Typography and click Settings.

Change settings of Google Fonts

You will land on the Customize screen for your current theme. Click the Google Fonts vertical tab.

add google fonts

Click on Basic settings

You can configure the fonts related to the content of your site here:

  • Base typography including all the text elements inside the tag except heading tags, buttons, and the input elements.
  • Headings typography
  • Buttons and inputs typography
changing settings of Google fonts

Select a different font from each dropdown and watch how the preview changes. Choose your suitable font combination.

Choose font-family in Google Fonts

Click the Back arrow and select the Advanced settings. These configuration options refer to other sections of your site.

Change Advanced settings in WordPress

Select Navigation and change the font family for this page element.

Choosing Font family

Keep tweaking until you are satisfied. Once completed, click on Publish.

WordPress Plugins for Google fonts

Now, we are going to discuss four plugins that would help you to play with the different aspects of your font like the style, the size, the color, etc.

WordPress Google Font Plugin

It is one of the most popular and probably also the coolest of WordPress plugins. The introduction of the Google free font directory was a landmark event in web typography. The Google Directory has tons of mind-blowing fonts to choose from and the directory is growing like gangbusters. Granted font plugins like FontBurner.com did exist, but the font selection for your basic blogger was limited at best.

The WordPress Google Font plugin is more than just a directory of fonts. While the plugin adds the necessary Google code, the user is also able to assign Google fonts to CSS elements of the site from within the WP admin. It enables you to target the Google fonts from the stylesheet of your theme.

img 607438c2c909e

FontMeister

It is another one-stop plugin from WordPress. Fontmeister grabs fonts from Font Squirrel, Fontdeck, Google Web Fonts, and Typekit so that you can use them in any WordPress theme.

Font Test Site

This is a revolutionary WordPress plugin that helps and allows you to see the changes as you make them. Do you know what makes it cooler? It has no coding involved. You are accustomed to clicking on content, dragging, and dropping. Why should this be any different? The plugin is built to recognize whatever you click on.

Other plugins essentially make you wait to see your changes once you have hit the update button. Seeing the changes as you make them allows you to tweak the look and have a feel of the font. You can see the size and color-changing right away.

Typecase Web Fonts

You can try out different web fonts in WordPress that can be fun and make you feel like a creative rock star. Typecase is another incredible plugin that enables you to browse, find and select fonts to add to your site from Google Web Fonts.

Play around with all the available fonts. You can be creative or choosy. Pick a font that reflects who you are. It is easy to get caught up in the coolness of fonts. Before you know, you may want to get your hands dirty and tackle customizing your font with specific code and improving your SEO ratings.

Useful Practices of using Google fonts

best Google Fonts practises

·      Limiting Font Weights: Selecting the complete set of font weights is tempting but it certainly has its drawbacks. For every variant, API gets heavier and takes more time to load the complete set of font weights. This is usually loaded at the start of the web page, and if not optimized, can slow down the initial loading time of your web page.

·   Hosting Fonts Locally: Google font is kind of an online library that is hosted elsewhere. Although it has a minimum impact on your site’s performance, however, in the event of unavailability, you would still be able to server the selected Google fonts if hosted locally.

·  Accessibility is important: It is not an option anymore to optimize your website for people with vision impairment. Google fonts enable you to style your font the way which is most convenient to this type of visitor.

Best 6 Google fonts to use in your Website

Roboto

img 607438c555703

Roboto is one of the most popular Google Fonts. It is a nice mix of professional and friendly font. It has smart and easily readable characters, but still, it has smooth curves. Using this on your WordPress website as the main font will make your content easy on the eye.

Open Sans

img 607438c629e62

Open Sans is another widely used Google Font. However, although the font still has a friendly appearance, it has a somewhat more professional approach.

Balsamiq Sans

img 607438c714f02

Balsamiq Sans has a hand-drawn look but it is much cleaner than similar fonts. It has clear spacing, too, so it’s not that distracting.

Poppins

img 607438c7b7b4c

Poppins is another popular font for websites. Each character is almost mono-linear, meaning its vertical and horizontal strokes have the same visual weight.  It’s a good choice for blog posts as it is easily readable.

Raleway

img 607438c849b76

Raleway is simple yet elegant. It has a sleek and clean look, while also adding some quirks, such as the overlap on the letter “W.” It’s a good choice for the main text, but equally good for titles, too.

Bellota

img 607438c907c4e

Bellota is a simple and clear font that has a little flair added to it. It’s a good pick for general post writing, but it could be used for titles and quotes, too.

So, you have been informed of all the details that you need to use the Google fonts in your websites. You can get other similar articles at Blog – Wpuber.com.

Author avatar
Tim Michaels
I am into WordPress and web development for the last 10 years. I use my experience to help people just starting with WordPress. Follow my blog at WP Uber for everything related to WordPress.
We use cookies to give you the best experience.
Do NOT follow this link or you will be banned from the site!