How to change the font for specific blocks

Google has a lot of fonts that you can use in your WordPress site which may not have come with your theme. If you want to change the font for specific blocks and leave the rest of the site’s fonts alone, this is for you. This is actually pretty easy to set up and very cool.

Here are the basics:

Find the font

Check out https://fonts.google.com. They have tons of fonts there you can use for free. Just make sure the one you choose is under the Open Font License. Otherwise, it will just display a default style. Once you choose “Select this Style,” a menu panel should open up and give you the CSS code.

Add the plugin

Add the Easy Google Fonts plugin to your site and activate it: https://wordpress.org/plugins/easy-google-fonts/

Create a div class

On the post or page where your text is, select a block of text. In the block options panel on the right, scroll to the bottom until you see Additional CSS class(es).

In the box, type whatever you want to name the class. It doesn’t matter what you use, just make note of it for later. Do this for all the text blocks on the page (annoying, I know, but it has to be done).

Add the CSS in the customizer

This is the big moment. You’re going to see if your font changes. First, click View Page to get out of editing mode. Then, in the top admin bar, choose Customize. Scroll to the bottom and open the Additional CSS menu.

Add this code:

.handwritten {
font-family: ‘East Sea Dokdo’, cursive;
font-size: 200%;
line-height: 120%;
}

There may be other code in there already. Just place this code at the bottom after everything else.

The first line item (in this case, “.handwritten”) is your div class. Make this whatever you named your div class in the last step. Then, change the font name to whatever you chose from Google Fonts.

note: sometimes you need to play around with the value after the font name (“cursive”), or even delete it to make it work. YMMV.

The font-size and line-height attributes aren’t necessary, but I added them for my own extra customization. You can tweak them if you want, or just delete those lines.

You should see the font update on the page. If not, contact your tech person (or me) for troubleshooting.

Good luck!