Easy Google Fonts

What is this plugin used for?

Easy Google Fonts offers a simple way to change the typeface in various parts of your blog, without the need to code. Having some understanding of CSS (Cascading Style Sheets) selectors will allow you to extend this plugin even further.

This plugin makes use of the Google font library, https://www.google.com/fonts.

Easy Google Fonts plugin page: https://wordpress.org/support/plugin/easy-google-fonts

Please note that while this plugin makes use of the Google fonts repository, the plugin itself is not made by Google and is not supported by Google.

Before you begin

These instructions assume you have already activated the plugin in the Plugins section of your blog’s Dashboard. For more information on plugin activation, please see the page on Plugins.

WARNING: Please do not enable this plugin if your site uses the Magazine Basic theme.

Choose some fonts BEFORE using the plugin

Since the list of fonts available through the plugin is so long, and it can be painstaking to try out different fonts just to see what the font looks like, we recommend finding a few sample fonts you like first.

Go to the Google fonts website (https://www.google.com/fonts) and take a look at the different font options. Find some that you like here, before coming to the blog.

Then, use the plugin to preview the ones you chose in the context of your blog, and see what works best!

Note: It can also be handy to Google “best Google fonts” to narrow down the options even further. With so many fonts to choose from, it can be a little overwhelming!

Changing the default settings via the Customizer

Without any setup, you can begin to select new fonts for the paragraph text, and Headers 1 through 6. Any more specific changes need to be set up using CSS selectors (in the next section).

  1. In your blog’s Dashboard, go to Appearance > Customize to enter the WordPress Customizer.
  2. Click the Typography option, then Default Typography. (Alternatively, if you have set up some font controls, they will be in the Theme Typography section)
  3. You will see the rules that have been defined in the plugin. What area of the blog they affect will depend on the theme you are using, and some of the settings you have chosen. If you are not familiar with the makeup of your site, you may need to play around with these settings to see what they do.
  4. Click Edit Font for one of the font controls to make some changes.
  5. Make changes (see options below), then click the blue Save & Publish button to apply your changes. If you don’t want to make any changes, simply click the arrow button (next to Save & Publish) to get out of the Typography section, then the ‘x’ to get out of the WordPress Customizer.

Styles tab

This tab includes the options for selecting and applying a different font.

  • Script Subset – narrow down the choices by language
  • Font Family – a long list of fonts. Scroll to find fonts sorted alphabetically under a few categories
    • Standard Web Fonts
    • Google Serif Fonts
    • Google Sans Serif Fonts
    • Google Display Fonts (bigger personalities – best reserved for titles)
    • Google Handwriting Fonts
    • Google Monospace Fonts
  • Font Weight/Style – many fonts come with different variants, offering bolder weight or italics. Click the dropdown to see which options are available for the font you chose.
  • Text Decoration – choose from default, none, underline, line-through and overline,
    • NOTE: Underline should only ever be used to identify links.
  • Text Transform –  choose from None, Uppercase, Lowercase and Capitalize

Appearance tab

Change the colour, background colour, font size, line height and/or letter spacing of the text element you are editing.

Positioning tab

Change the margin, padding or display of the text element you are editing.

*Please note that some themes have used the !important selector set for some styles – the end result is that you won’t be able to simply select a new one by using the defaults. If that happens, you can set up a font rule that overrides the theme’s !important setting (see the next section).

Advanced: Setting up new font controls using CSS selectors

This is an advanced feature that relies on a certain level of knowledge about CSS (Cascading Style Sheets). You will be required to understand what CSS selectors are, so that you can utilize them to create new controls.

These controls will appear in the Typography area of the Customizer, giving you the ability to control even minor elements of your page.

Location of Advanced Features

These advanced features can be found in the Dashboard of your blog , under Settings > Google Fonts (provided the plugin has been enabled).

Edit Font Controls tab

  1. Enter a name for your new font control, then click the blue “Create Font Control” button.
  2. Add CSS Selectors – enter CSS Selectors, divided by a comma, to indicate which areas are to be controlled by the font control.
    • This may be an HTML tag, like “H1”, or it could be a CSS class, like “.entry-title” – or it could even be a combination of HTML tags and CSS classes, like “.entry-title a”.
    • You really need to understand the structure of your theme’s code, and how the CSS can control certain elements.
  3. Force Styles Override – check this if you want to override all styles set by your theme’s code. For example, if the theme has a style set as “!important”, you won’t be able to set a new style unless you check this override box.
  4. Click the blue “Save Font Control” button to apply your changes, and create the new font control.
  5. You will now be able to set new styles using this font control in the Customizer, under Typography > Theme Typography.

Manage Font Controls tab

This screen is used for managing all of your custom font controls.

From this screen you can:

  • View all of your custom font controls and the CSS selectors they are managing.
  • Delete any/all custom font controls.
  • Force Styles Override (Optional): If your theme is forcing any styles in it’s stylesheet for any styles managed by this control then check this option to force a stylesheet override.

Advanced tab

This panel allows you to enter a Google API key. This is not required, but enables the theme to update itself with the latest google fonts.

For more help with the Google API, click the Help button in the top-right corner, then click “Get Google Fonts API Key”.

Resources

Disclaimer

This plugin was developed by a third-party, who has made it available for free, with no promise of support. While we do our best to vet the plugins we install, including doing some rigorous testing on a test system that runs like blog.ryerson.ca, we can’t predict all of the possible issues.

Should a problem arise, we cannot guarantee that we will be able to fix it – but we will do our best.