Google Fonts, since being released a few years ago, has been a web developer’s dream. Instead of relying on a small number of fonts or an expensive system to manage custom fonts, you can instead use Google Fonts to put some fonts on your site. With recent editions of a recognition of the font-display: swap; variable, it now makes more sense to use Google Fonts, as using font-display: swap; can speed up the site.
However, the instructions really given on how to enqueue Google Fonts doesn’t really work for WordPress. The reason being is that if you follow the instructions you will be locking in WordPress to use the font with your theme. You are left in a position where WordPress itself cannot make changes to your font files in a way to improve them (such as cache them locally, minify them, or run them from a different location.
Enqueue styles and scripts is the correct way in WordPress to integrate scripts and styles. it will give power to plugins and themes to control the fonts. This will allow you to do things such as cache fonts, load things when they’re needed to be, and do all manner of things. Dropping the code into the header of your theme won’t do this, so in this blog post we’ll discuss how to enqueue Google fonts in WordPress, the right way.
Using wp_enqueue_style
We will be using wp_enqueue_style to enqueue Google Fonts in WordPress. wp_enqueue_style is a function used to properly enqueue stylesheets into WordPress. This will work with any theme that uses wp_head (which will be most of them), and will give WordPress the power to manipulate the font however they wish, allowing it to be included in caching, for example.
Get Your Google Font
First off, go to Google Fonts and get the font you want. For this example I’m using the font Roboto. When the popup appears when you click “Select This Font”, be sure to copy everything between the quotation marks next to href.
Enqueue Your Google Fonts in WordPress
You now need to enqueue your fonts, you can do this by hooking into the wp_enqueue_scripts action, this is done using the following function, which you can place in a functions.php file or a plugin.
1 2 3 4 5 6 7 8 9 10 | <?php /** * Script to enqueue fonts in a theme * @return void */ function winwar_enqueue_fonts() { wp_enqueue_style( 'Roboto', 'https://fonts.googleapis.com/css?family=Roboto&display=swap', array(), '1.0' ); } add_action( 'wp_enqueue_scripts', 'winwar_enqueue_fonts' ); |
Please note this does not automatically change the font to the new font, instead you need a CSS definition somewhere.
And that’s it! Hopefully that will give you something to work with, and you start enqueuing Google Fonts in WordPress the right way. If you have any questions, please be sure to leave them in the comments!
Comments
Polite Disclaimer: I am welcome, open and willing for corrections to be shared in the comments (with corrections being added to posts and credited), and the comments field should be used to promote discussion and make this post better. I do not know everything and if anybody finds a better way to do something, then by all means please share it below.
However, I'm unable to offer support to posts. The reason being is that WordPress has tens of thousands of plugins and millions of themes. As such, finding out exactly why code doesn't work with your setup is a long process. If you wish for me to look at your code, please use the priority support area.
Comments asking support will be left on the site, but there is no guarantee of answer.
Comments are closed.