Easy Google Fonts Plugin Makes It Easy To Add Google Fonts To Your WordPress Site | Tutorial 53
#worldsolutions
Easy Google Fonts is a simple plugin that allows you to add Google Fonts to any text on your website quickly, easily and without code. You can even add the Google Fonts API to instantly have access to new fonts as they're released.
The get started first you need to install the plugin.
To install this plugin please log into your WordPress dashboard, hover over Plugins and then click on Add New.
On the next page type "easy Google fonts" into the search bar. The plugin we want should be the first one in the top left.
Click on the Install Now button and then click Activate after it's installed.
A new menu item called Google fonts has been created in the Settings menu.
On the first page that loads is where you set the 'target' for the fonts. In the Control Name field enter a descriptive name for the font target that makes sense to you.
Then click on the Create Font Control button.
Now a new input field will appear. In that field you input the CSS selectors that this font control will apply to.
Common examples of how to set this up would be Heading 1 as the control name, then h1 as the selector.
Or Heading 2 as the control name, then h2 as the selector.
Or Paragraph as the control name, then p as the selector.
You get the idea.
Once you have a font control created you can head over the Appearance, then Customise to start applying the fonts.
Once in the WordPress customizer you can click on Typography, then click on Theme Typography.
You will then see the control group or groups you created. Click on the Edit Font link below the Control Name.
Now you can make changes to the font. If the page you're using the customizer on has the appropriate css selectors then you will see live updates as you make changes to the font settings.
The font settings included:
All of the Google fonts available
Font weight
Text decoration
Text transform
Clicking over to the appearance tab you can set colors for the font and the background.
The Position tab allows you to define the alignment of the text.
#worldsolutions