WP Rig ships with preconfigured support for two Google fonts. Here, we’ll go over how the function works and how to change the fonts of your theme.
Typography and fonts play a major role in modern web design, and thanks to modern tools like Google Fonts, adding custom fonts to our web designs and our WordPress themes is easier than ever.
However, it is still a bit of work to get everything to work properly, especially if you want it to be performant. For this reason, WP Rig has a complete setup for Google Fonts ready to go, and configuring which Google Fonts you want is really straightforward.
Out of the box, WP Rig uses two Google Fonts to style its content: Crimson Text, which is a serif font for all the body text, and Roboto Condensed for the headings and other highlights. If you don’t like this look and you want to change to a different font, here’s how you go about doing that if you want to use Google Fonts.
If you were building a site from scratch and you were just writing the html, you might normally would make your selections in Google Fonts, and copy the link tag code to drop into your site header. Then you would reference the font family/families as needed.
However, when you work with WordPress, you don’t just add a link element like this into your code. You want to register the style, enqueue it at the right time and above all, make it as performant as possible.
WP Rig does several things to make this all happen. You just need to take note of the name of the font you want, and what font weights you want.
How it works
To set up a new font, you need to first register it in PHP. And that’s done by going to the “includes” folder, then to “styles” and opening “Component.php”.
Then, find the “get_google_fonts” function. From here, you can define which Google Fonts you want by simply adding to the array. The Google Fonts array declares the name of the font you want, and then the weights you want.
In this example, you could could copy and paste line 361 on to line 362. Then, you would replace Crimson Text with the font name you want, and the font weights with the font weights you want. (Each font weight number should be followed by a comma, until the last number.)
At this point, you can reference the fonts as needed in your style sheets, or you can add them into your custom variables.
The cool thing is, this is all optimized as much as is humanly possible. So this loads the fastest you can load Google Fonts. Of course you can make it faster by locally hosting your font. But if you’re going to use Google Fonts, this functionality makes it possible to just add in the fonts you want, the fonts weights you want, and then just reference as needed.