How to use Google fonts in a WordPress Website


What is Google Fonts?

Wait, Google fonts? another Google product? this is what you might be thinking if you haven’t heard about Google Web fonts. Google fonts is one of my favourite service that i have been using for more than a year. Google Fonts allows you to add & use fonts into website and make your site beautiful without any hassle of hosting the font, licencing the font, etc.

Let’s see what Google font’s official about page says:

Google Web Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. We believe that everyone should be able to bring quality typography to their web pages and applications.

After i got really excited about Google fonts, i thought what about licensing stuff?. People don’t know what licenses does fonts have and font packs are expensive to purchase for personal use, then i saw the line ‘All of the fonts are Open Source’, i immediately understood the concept behind it and i know that it is going to be huge because i could totally see myself using it.

All of the fonts are Open Source. This means that you are free to share your favourites with friends and colleagues. You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commercially — in print, on your computer, or in your websites.

WordPress Plugins for adding Google WebFonts

Here are some top plugins that would help you get  Google fonts.

WP Google Fonts

The WP Google Fonts plugin allows you to easily add fonts from the Google Font Directory to your WordPress theme.

The WP Google Font plugin makes it even easier to use Google’s free service to add high quality fonts to your WordPress powered site. Not only does this plugin add the necessary Google code, but it also gives you the ability to assign the Google fonts to specific CSS elements of your website from within the WordPress admin. Or if you would rather, you can target the Google fonts from your own theme’s stylesheet.

Visit

Fontific Google Fonts

Fontific allows you to use Google Fonts on your WordPress website.

Fontific gives you a really simple way to use fonts from Google Web Font library on your WordPress-powered website.

To use one of those fantastic fonts, you just need to add a new font rule in Fontific panel(Appearance/Fonts admin menu), specify css selector to which this rule will be applied, setup font settings and save changes you’ve made. That’s it.

  • No need to edit any css stylesheets
  • No new database tables are created
  • Friendly UI (use sliders to adjust font size or line height)

Visit

Google Webfonts Integrate

This plugin integrate Google WebFonts v2 to your website. Support nearly all of Google Webfonts.

You can Select 2 different Font for your two different area. You can apply with this fonts using CSS codes
Visit

Google Web Fonts Manager

This plugin provides access to google API for fonts to provide access to these fonts on your website.

Simple plugin gets list of fonts available from google fonts via API and can selectively be added to CSS. Check out the Google Web Fonts Manager Plugin for WordPress Video.

Visit

 

Ultimate Google Fonts

With this Google fonts plugin you have more than awesame 90 open source fonts at your disposal! Choose and customize Google fonts directly from your WordPress admin panel!

Enable only font you really want to use! Check text effects examples direcly in your admin panel. Text that use beautiful Google fonts is selectable. For more info and examples of text effects go to the Ultimate Google Fonts‘s page.

Visit

 

GFontr, Google WebFont

Allows you to easily include fonts from the Google WebFonts library.

This plugin provides an easy way to include fonts from Google WebFont API. This plugin does not write CSS for you but call all the fonts selected in the backend page, making them easy for you to use by just changing your CSS file.

Visit

 

Tutorials on How to add Google fonts

Here are some tutorials that will help you add the Google fonts in your site.

How to Add Google Web Fonts in WordPress Themes the “Right” way by WpBeginner.com

Excerpt from the article: Google Web fonts are amazing free resource for web designers. In WPBv4, we have started using a popular Google Font combination: Oswald and Lora. Some of our users have asked us how to add Google Web fonts in WordPress themes. If you remember, we showed how to add Google fonts in WordPress Post Editor. In this article, we will show you how to add Google Web Fonts in your WordPress themes the RIGHT way, optimized for performance.

View Tutorial

 

How to Add Google Web Fonts to Your Blog by FuelYourBlogging.com

Excerpt from the article: Gone are the days when the design of your blog was limited to just a few select fonts. There are many new solutions to help you implement just about any font that you desire. This can range from hosting the font on your server, paying for a service, or tying into an API such as Google Web Fonts.

View Tutorial

 

How to add Google Fonts to your WordPress theme by WpInsite.com

Excerpt from the article: The Google Fonts directory is one of the most exciting developments in web typography to come about it recent time. Google Fonts allows us as blog developers and users to use exotic eye catching fonts in our WordPress themes.Previously it has been possible to use a handful of bold exotic fonts in our themes but it required tonnes of JavaScript code which put a heavy burden on our bandwidth and page loading times. The new service offered by Google Fonts has come along and saved us once again.

View Tutorial

 

How To Add Fonts From Google Font Directory To Your Website

A video tutorial on How To Add Fonts Form Google Font Directory To Your Website

View Video Tutorial

 

Q&A troubleshoot questions

If you are having issues with Google fonts, here are some places that you can get help!

StackOverflow on Google fonts

Css-tricks forum‘ search on Google fonts

WordPress.org forums‘s search on Google fonts

Or you can also join our Website Help forum and get help

This Post Has 1 Comment

  1. aneeshtclt says:

    Good article…Is google font mobile friendly?..

Leave A Reply