CUSTOM CSS,  FONTS,  Q & A

How to Add Google Font into the Body of the Content of Text in Visual Editor

At the moment, there is no “easy” way to target a specific section of your content to render a Google Font. However, it is possible to do, and I’ll show you how.

First, you want to make sure you load your desired Google Font. Go to your Dahsboard, and under Appearance => Google Fonts, select the font you want to load. I also have a video tutorial on loading your Google Fonts from your Dashboard.

What this does is loads your Google Font in the <head> section of your WordPress generated HTML document. Now we need write a little custom CSS so we can apply our font to any specific section of text in our Visual Editor. Head over in your Dashboard to Appearance => Custom CSS, and add this bit of CSS.

.google-font-marcellus {
    font-family: 'Marcellus', serif !important;
    font-weight: 400 !important;
}

Now all we have to do is wrap the section we want rendering this Google Font in our visual editor.

And that is all you have to do. I could probably make this solution more elegant in the future, but at least you are still able to load and render a Google font to specific sections of your content through your WordPress dashboard.

 

One Comment

  • Chris

    You rock! Thanks!! I am still building the Alaskan “to do” list I’ll email you once I get it finalized. Thanks for all of your help.

Leave a Reply

Your email address will not be published. Required fields are marked *