{"id":2957,"date":"2018-12-28T20:55:00","date_gmt":"2018-12-28T15:25:00","guid":{"rendered":"https:\/\/awpguide.com\/?p=2957"},"modified":"2018-12-28T21:04:51","modified_gmt":"2018-12-28T15:34:51","slug":"how-to-add-google-fonts-to-wordpress","status":"publish","type":"post","link":"https:\/\/awpguide.com\/wp-guides\/how-to-add-google-fonts-to-wordpress\/","title":{"rendered":"How To Add Google Fonts To WordPress"},"content":{"rendered":"

Most WordPress theme developers will embed a custom Google font on their themes. Some are hosted the font’s locally and some are calling the fonts from Google fonts website. Some folks need to use a custom Google font on their WordPress blog.<\/p>\n

If you want, this tutorial is for you! In this post, we are going to show you the right ways to add Google fonts to WordPress blog.<\/p>\n

Why Add a Custom Font?<\/h4>\n

Well for improving your blog, you could do this. As an example, let’s take the Aspire Pro WordPress theme<\/a>. The theme’s inbuilt font is not kind of awesome! ( I am sorry Wes!)<\/p>\n

\"font<\/p>\n

It does not seem very nice. For improving the user’s experience, you can use any custom Google font on your theme. So, you can change the font to your new one.<\/p>\n

Your readers will stay on your website.<\/p>\n

How To Add Google Fonts To WordPress Blog?<\/h2>\n

So, let’s start adding custom Google fonts to your WordPress blog.<\/p>\n

First of all, log in to your WordPress admin area and go to the theme editor.<\/p>\n

\"wp<\/p>\n

It’s just below the appearance section. Check if the theme got a header.php file.<\/p>\n

Most standalone WordPress themes<\/a> come with the file. If you are using any child theme<\/a>, you will not get this file. In that case, you need to download the header.php file from your parent theme, upload it to your child theme’s folder.<\/p>\n

You can use the FTP<\/a> or file manager for downloading and uploading files.<\/p>\n

In our case, we are using the Twenty Seventeen WordPress theme<\/a>. It’s a standalone theme and got the header.php file.<\/p>\n

So, that part is cleared. Let’s move to the second step.<\/p>\n

Choosing The Best Font<\/h4>\n

There are so many fonts are available in the Google fonts directory.<\/p>\n

You need to go to Google fonts<\/a>.<\/p>\n

\"Google<\/p>\n

You can search for a font from there. In our case, we are huge fans of the Work Sans font<\/a>.<\/p>\n

\"work<\/p>\n

Let’s take this font. All you need to do this is, click on the “select this font” button.<\/p>\n

\"work<\/p>\n

They will give you a standard embed code for using on your website. Simply copy it.<\/p>\n

\"work<\/p>\n

In the WordPress theme header file (header.php), you need to paste this code.<\/p>\n

Adding Font To WordPress<\/h4>\n

Just before the <\/head><\/strong> tag. Like this.<\/p>\n

\"add<\/p>\n

Simply update this file. Once you did, it is time to specify the font on your theme’s CSS file.<\/p>\n

If you are using a child theme, you can paste the CSS right in your child theme’s style.css file. But if you are using any standalone WordPress theme, you need to use the additional CSS section or need to edit the style.css file with the new font CSS.<\/p>\n

Go to the customizer. There, you can add additional CSS<\/a>.<\/p>\n

For using the font, use the CSS like this:<\/p>\n

\r\nfont-family: 'Work Sans', sans-serif;\r\n<\/pre>\n
In the customizer, go to the additional CSS section.<\/p>\n
\"ading<\/p>\n
For using the font everywhere on your blog, you can use the below CSS:<\/p>\n
\r\nbody {\r\n\tfont-family: 'Work Sans', sans-serif;\r\n\tfont-size: 16.8px;\r\n\tfont-weight: 500;\r\n}\r\n<\/pre>\n
You can see the live preview of your changes.<\/p>\n
\"work<\/p>\n
If you don’t want to use all over the blog and just need it on the headings, CSS will be like:<\/p>\n
\r\n.entry-header .entry-title {\r\n\tfont-family: 'Work Sans', sans-serif;\r\n\tfont-size: 38px;\r\n\tfont-weight: 700;\r\n}\r\n<\/pre>\n
NOTE: Class may be varied. You need to find exact CSS class of the element and use it for styling them.<\/em><\/p>\n
When you are good, just publish the changes.<\/p>\n
\"publish<\/p>\n
Pretty simple isn’t it?<\/p>\n
We hope you found this post helpful and learned how to add Google fonts to WordPress. If you did, please consider sharing this post with your friends and fellow bloggers. It will help them to use a custom Google font in their WordPress blog.<\/p>\n
For more related posts, you need to check out our blog section<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Most WordPress theme developers will embed a custom Google font on their themes. Some are hosted the font’s locally and … <\/p>\n
Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2973,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/posts\/2957"}],"collection":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/comments?post=2957"}],"version-history":[{"count":0,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/posts\/2957\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/media\/2973"}],"wp:attachment":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/media?parent=2957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/categories?post=2957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/tags?post=2957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}