Change font with Fonts Plugin
- Go to your Dashboard > Plugins > add new plugin, search “Fonts Plugin | Google Fonts Typography”. More detail to install and activate a new plugin, tutorial install new plugin can be read here.
- After activating the plugin, go to Appearance > Customize.
- Find “Fonts Plugin” and select “Basic settings” to change the font body/paragraph. If you want to be more spesific, you can use the other setting. Example, if you want to change the title page/title post, use “Content settings”, and change the h2, h3, h4, etc there.
- Publish.
- Note : if you want to upload other font, you cannot use this plugin. Contact me if you want the service to add additional font.
Change Font with Easy Google Font Plugin (old tutorial)
Change The Paragraph Font
- To change the font of your entire theme, add and activate “Easy Google Font” plugin.
- After you successfully activate the plugin, go to Appearance > Customize.
- Click the “Typography” menu tab.
- Click “Default Typography” to change the font. You can only change the paragraph and heading font here.
- Publish to save changes.
Add a CSS Selector for Easy Google Font plugin
Use this method if you need to “target” a specific area that you want to change.
First, Go to Settings > Easy Google Font.
Make sure the “Create” tab is selected, fill in the name for this new area (Font Control Name) and also the class name of that area (under Font Control CSS Selectors).
Common CSS Selector
For Blog Post Heading: .entry-title,
For Menu Items: .genesis-nav-menu a,
For Entry Meta: p.entry-meta,
For other class name, you can contact me first and request them from me. Send me a screenshot of the area that you want to change and I will help you with the class name. Contact me via email or Etsy DM.
Note : make sure you add , (comma after each selector) if you do not include , (comma) the CSS selector will not be saved (it will be ignored).
Make sure the “Font Control Properties” is checked.
Apply this from the customizer, Go to Appearance > Customize > Typography > select Theme Typography > Select the font control name that you created before. You will see the name of the font control that you created in first step. Select that.
You will be able to change the typography of the selected CSS selector here.