Change the Font of Any Text Element with the Google Typography Plugin
Many WordPress themes today come with the option to change the fonts used in the theme. They may say in the description that you will have 600+ Google fonts to choose from; however, you may be limited as to what text elements of a theme you can actually change. I want to share with you an excellent plugin for WordPress that will allow you to replace the font for ANY text element of a theme and I will run you through how to use this plugin, which is Google Typography.
We recommend the Google Typography plugin frequently when we are asked by customers how to change the font of specific text areas of a theme. For example, we add in default fonts to be used as the site titles in our theme’s headers as part of the theme design. However, if someone would like to change the font for the site title, they can easily do so with the Google Typography plugin.
How the Google Typography Plugin Works
Let’s get started! Go to Plugins > Add New and in the search field, type “Google Typography”. The first result is the one you need, so click Install Now and then Activate.
Once the plugin is activated, go to Appearance > Typography. At the top of the screen, you will see a button for Add New, click this.
Next, you’ll see a new, blank typography panel. I will first explain how to use the plugin by changing more generic text elements, such as the paragraph font and header fonts.
To change the paragraph font, in the CSS Selectors field at the bottom of the panel, enter the HTML tag for the paragraph tag, which is just ‘p’. Enter some text into the preview box then select the font of your choice from the font family drop-down. You can also change the colour and font size here.
When you have finished, click ‘Save’. Your paragraphs will now be in your new font choice, size and colour.
To change the font for all of the headers, enter the HTML tags for each of the headers you want to change (h1, h2, h3, h4, h5, h6 for all of them) and separate each tag with a comma (,). Again, enter some text into the preview box and select the font of your choice from the font family drop-down, and also change the colour if you wish.
If you also want to change the size of each header tag font and have a different colour for each header, for example, you will need to add each header tag separately in a new typography panel as the size and colour change will affect all of them.
Using ‘Inspect Element’ to Target More Specific Text Elements
But what about changing the font of more specific text elements? Let’s take the site title in your theme for example as I mentioned earlier. To change the font for this, you will need to target this text element specifically, and the way you can do this is by using your browser’s ‘web inspector’ tool. Not all browsers will have this feature though, but all modern browsers, such as Chrome, Safari and Firefox do. For the sake of this post, I will use Google Chrome as the browser for inspecting the element.
The developer tool will already be activated when you open the Chrome browser; there is no need to turn it on like in some other browsers. Right-click on the element you want to inspect, so in this instance, let’s inspect the site title in our Semplice theme.
You will then see the developer tools window appear which will display the HTML markup for the site, any errors that may be occurring on the page, sources for the page and the CSS styles of the elements on the page.
You can change the location of where you want the developer tool window to dock by clicking on the three vertical dots at the top right of the window – I prefer to have the window docked to the bottom of the screen as it makes it easier to see what you are looking for.
Locating the Selector
What we need is the CSS selector for the site title. A CSS selector targets the content that you want to style. In the developer window, the inspected element will be highlighted in the HTML markup and the element selector you need is at the top, in the Styles tab. The selector for the site title here is:
#sq-header #sq-site-logo #sq-site-name
Now copy this selector and then go back to the Google Typography plugin.
Changing the Targeted Text Element with Google Typography
Open a new Google Typography panel and in the CSS Selectors field, paste the site title selector you just copied from the developer tools window. You have now targeted the site title of the theme and can now change the font, size and colour as you did for the paragraph and headers.
When you are happy with your new font choice, colour and size, click Save. Ta-da, your website header will now display these changes to your site title!
Now you have changed the site title, why don’t we try changing the font for a different text element in the theme as well, such as the ‘Read More’ button text? Go back to Chrome and right click on the ‘Read More’ text in one of the post buttons and then click ‘Inspect’.
Copy the selector, which in this case for the ‘Read More’ button in Semplice, is:
Paste it into the CSS Selector field of a new Google Typography panel. Change the font, size and colour to your liking and click Save.
The ‘Read More’ in each of your buttons for your posts will now also display the changes you have made. Simple as that!
And that’s all you need to know to use the Google Typography plugin. By using the Inspect Element tool, you can easily target any text element of your theme that you like and make it unique to you. Let us know your thoughts on using the Google Typography plugin and using the Inspect Element tool in the comments form below.