How to Use Google Fonts On Your WordPress Site?

No doubt that every single premium theme comes with a very attractive and beautiful font. For demo you can consider “Genesis Framework Theme“, a different and beautiful Title font with an italic body font. So, if you looking for fonts for your WordPress blog then its no doubt that Google is the King; with a large collection of web-based fonts. In blogger platform Google used its own fonts but now quite a few years Google allow to add these all fonts on your blog.

Now it’s not very difficult to set up google fonts in WP blog. You can use Plugin or set up using Editors.

>About Fonts:

It’s difficult to find the blogger who don’t know or never heard about Google fonts. Now what the data says, there are about 648 font families available for decorate your WordPress blog. Like some
Categories like

  • Serif
  • Sans-Serif
  • Handwriting  etc..

Now Come to Main Part: How To Add??

#1. Using Plugins:

Now there is no doubt that there is number of plugins available in WordPress Plugin page that offers easy Google font integration. So, here is some Google Font integration plugins :

1. Easy Google Fonts:

It’s the most easy plugin for setup  fonts on your blog. You can choose fonts, their colours, different headers etc.

★Somed Features:

  • Preview  fonts without refreshing the page in real-time right in the WordPress Customizer.
  • Over 600+ G. Fonts to choose from as well as a list of default system fonts.
  • Works with any WordPress Theme. No coding required.
  • Automatic Background Updates: Updates the  list with the latest fonts automatically once.
  • Custom WordPress Customizer Control: One of a kind control only available with this plugin.
  • Full control of your theme’s typography in any WordPress theme (no coding required).
  • Allows you to preview font changes on your website in real-time using the WordPress customize.
  • Create Unlimited Custom Font Controls: Create custom font controls in the admin area that are instantly available in the Customizer preview.
  • Allows you to create your own font controls and rules in the admin area (no coding required).
  • Allows you to easily change the look of your website with the click of a button.
  • Automatically enqueues all stylesheets for your chosen.
  • Allows you to add them to your theme without editing the themes main stylesheet.

2.Google Font Manager :

It’s also a new plugin added a few months ago in WP Plugin Store. As the Plugin says “You can use this plugin to simply add font to your site and reference them in your own custom style sheets (if you are using a child theme). Or, if you are not coding your own theme, there are a variety of ways you can use the built-in functions of WordPress to make use of the fonts you add. Either way, it provides the perfect solution for adding and managing Google fonts.”

★Somed Features:

  • Add as many  Fonts as you want to your site.
  • Full integration with Google Fonts API.
  • Automatically adds fonts to Visual Editor (tinyMCE).
  • Optionally adds “Web Safe Fonts” to Visual Editor.
  • Customize style sheet to override theme default.
  • AJAX-powered, no screen refreshes!
  • Clean and fresh UI and UX design.
  • Fully responsive Admin.
  • Light-Weight… turn on and off options.
  • Resources only loaded in WP Admin when needed.
  • Multisite compatible with single API key.

Although There are also some other plugins available, you can choose like :  WP Google Fonts

#2. Modify Theme Stylesheet:

It’s the fastest way to change the fonts and add some dynamic and beautiful fonts on your blog. I m change all my fonts by using change my Stylesheet in Editor.

Coding Tutorial:

Here, I m show how to do all these, so I’ll be using Raleway font for this Tutorial.

>Step-1:

Now go to Google and search the item name which you desire to make your font. Here i am using Raleway fonts.

>Step-2:

Now select the first and you will be proceeded to another page having the fonts letters with how they looking. & Now click on the Open XXX , which is located above the page.

>Step-3:

Now you will select the style you want to modify like Normal 400, Bold 700 etc. Now scroll down and you saw this types like:

>Integrating With WordPress Blog:

>Step-1:

Login your WordPress and Go to Appearance > Editor.

>Step 2:

Now default it shows stylesheet. So open function.php file in another tab.

NOTE: We Force you to take a backup of stylesheet and function.php file; if you want to modify them.

>Step-3:

Now open function.php tab and find “Enqueue Google fonts” using ctrl+f.

Now go you change these like:
Now here just change the Name of you font like : Replace “Open Sans” to “Enriqueta” . Just copy the font name you want to place and replace the original font name.

Now update the file.

>Step 4:

Back to the style-sheet and find “font-family” just by pressing ctrl+f.
Now you find there is a body part like this:

This is the body part means the letters and the font using in this theme and you reading right now.

PS: body { Means the text font now you are reading. The font family is used is Raleway. If you want to change the Title font, so there is also named as ” title ” just change the name to your desire font. Be sure that the font you want to use is must be put on the “ function.php ” as i above show you. You can find also different titles like h1, h2… title etc. just change as your desire.

>Step 5:

Now save the file.

[bs_icon name=”glyph icon glyph icon-hand-right”] Wait for at least 2 hr. to change the codes. After this you can see the beautiful fonts charming you blog.

>Conclusion:

As you can see, there are several ways to make use of the Google Fonts. Integrating new fonts into a website can improve the experience overall it can take you blog to a high level.

If there is any question about or suggestions, then just add a comment in comment box.

If you like this post please share and viral it. Thanks 

Leave a Comment