Google Font Selector in Text Editor

Hi, I want to use a different font to the body or heading styles to emphasize certain text in the text editor. Previously I used a plugin for this. This gave me a selection of the entire Google font library in the font-family selection within the text editor. I have set the desired font up in Font Manager, but I can’t see where I can select the font to use on the site as needed.

Hi There,

Thank you for writing in, to add a Google Font, first navigate to https://fonts.google.com and search for the font that you need (example: Niconne). Hit the add button that correspond to it.

screenshot

You should then able to see a number of font-family selected on the bottom panel. Expand that panel and click the @IMPORT tab. Then copy just the line:

@import url('https://fonts.googleapis.com/css?family=Niconne');

Yes, do not include the <style> and </style> tag.

screenshot

Then paste that @import line statement on top of your child theme’s style.css file

screenshot

Then to apply the font-family; define this class, on child theme’s style.css file or Theme Options > CSS

.niconne {
font-family: 'Niconne', cursive !important;
}

Then apply that class to your text or headline element.



Hope it helps,
Cheers!

3 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.