How To Add Google Fonts To WordPress In 3 Minutes [Without Plugin]

This post was most recently updated on February 15th, 2018

Improving your typography is just as important as using a good theme or plugins.

So do you want to improve typography of your website and make it look gorgeous?

Well there’s no way better than “Google Fonts”

Now you may ask “I’m already using Many other plugins, is there any other way around?”

Yap! Just stick to end of this short post & you’ll know how to add Google fonts to WordPress without adding any kind of plugin or breaking your site.

 

google fonts to wordpress banner

Before starting in keep note that google font codes actually does affect your speed by just a tiny bit compared to the plugin method so there’s nothing to worry literally.

So shall we begin?

how to add google fonts to WordPress?

Ok to add & use Google fonts in WordPress there are usually only two methods.

  •  Using a plugin like Easy Google Fonts or google typography
  •  The manual method with help of some code which we’re going to walk through in this post

So this process consists of 3 phases.

  1.  Choosing one or a pair of font
  2.  Adding the fonts to WordPress
  3.  Adding a CSS code to serve them on your blog

Since we’re going to play with some codes I suggest you to have a backup beforehand but nothing to afraid just stick with me & I won’t let you break anything. So here we go.

Step 1: Choosing a Font

First of all, go to Fonts.google.com then choose your font. Note that you can select any number of plugins but I would suggest you to go for not more than two, one of your titles like h1 & h2 & another for your paragraph texts.

Google fonts have probably the largest collection of fonts on earth and choosing best google fonts for your site can be hard so here are few of my recommendations.

– Oswald
– Open Sans
– Raleway
– Lato

but don’t be limited to only these, I just suggested them based on my personal use, clean looking scheme and speed.

Here at AlphaTed, I use ‘PT+Sans+Narrow” for my paragraph texts & “Oswald” for all body texts.

Once you choose your fonts then click on little “+” sign at top right of your selected fonts then you will see a new window like below and kindly keep that page and window open as we need it later in step 3.

google fonts code pic

in this post we took “Mukta Mahee” and “Open Sans” just as an example.

Step 2: Adding Google fonts to WordPress

Now open the box at the bottom where your fonts are being selected & click on Embed > Standard, you need to add this piece of code in WordPress so it can serve them.

But where should you add them?

Well in order to do so go to your WordPress dashboard > Appearance> Editor> header.php and add your copied code just before </header> tag and update file (press Ctrl+f & search for it in case you can’t find the tag)

Step 3: Adding a CSS to start serving your fonts

You might think since you’ve already added google fonts code to WordPress why shouldn’t it just start serving on your site.

Well, what you did in step two is told WordPress where to source those fonts from but how can he know where to serve them, in your headers,h2 or paragraphs? After all, he is not smart like you.

To specify this go to your Appearance > Customize > Design & Layout >Additional CSS

Now here’s Little tricky part well not actually but still.

In your additional CSS you will tell WordPress to where to serve which contents, to do that type:

 P {
 Paste the CSS code of your desired font for all your paragraph texts
 }

This converts all your paragraph text from default font to your chosen font.

Same goes for headers:

H1 {
Paste CSS code of your desired font for all h1 headers aka title tags
}

Additional tags can be added by just using the comma like h1,h2,h3 and so on.

And that’s it.

Conclusion

Now do your own research & play with fonts a little to find out which one suits to your WordPress site.

So which font do you gonna use or have any doubts?

Do let me know in comments below. If you liked this post feel free to subscribe to our mail list to be an insider alpha & share just in case you missed.

Peace!!

 

Other articles you might like:

11 WordPress Plugins To Make Your Blogging Life Easier

WordPress Hostings That Won’t Make Hole In Your Pocket

We value your opinion