Using web fonts such as Google web fonts is a common need for sites on our network, so we give you several tools to make it easy to do.
First, some background. The fonts available in a visitor’s browser are the fonts installed on that visitor’s local computer. Since you have no guarantee which fonts are available locally, you run the risk that your site renders differently to different visitors, possibly breaking your site’s layout. Web fonts largely solve this problem.
A web font is a font that is delivered from an external resource on the web; that is, the font is delivered from a server other than that serving up your own site. As long as the servers delivering the web font are accessible, that font is available to all visitors. Before web fonts became widely available, designers chose from among a narrow range of fonts available on virtually all local computers, and that led to a less than typographically-inspired web. With web fonts making sites render more consistently, designers are free to show off their typographical chops.
Some themes load specific fonts out of the box as part of the default theme styling. In the past, we disabled this load process because we found that a majority of users wanted to change these default fonts. Some wanted to create a more customized look; others thought that the default fonts didn’t contribute enough to the design to justify the extra page weight of loading them. The best approach was to skip loading default fonts and provide a tool to load whatever font each user wanted, so we adopted that approach.
But times change. As designers paid more attention to typography and users wanted to stick with the default font selections (either because they liked them better or found it less work compared to changing), we noticed that most – but not all – of our users were not changing the font defaults. Therefore, we adjusted our approach to fit these changed tastes.
Our current approach is to:
- document in our theme overview the default fonts where web fonts are loaded;
- provide an easy tool to stop loading them if you choose to do that;
- provide a way to load the fonts of your choice.
Stop Loading the Default Theme Fonts
For any theme on wpPERFORM that loads default web fonts, we have a simple plugin that stops loading them. For the sake of this discussion, we’re not including icon fonts since they don’t form the base of a site’s typography.
At this time, the only web fonts that are included by default in themes we offer are Google web fonts. To stop loading all default Google fonts in any of the themes available on our network, simply activate our wpPERFORM.com Dequeue Google Font plugin.
Our plugin functions like an on/off switch. When the plugin is activated, the theme’s default fonts don’t load; when it’s deactivated, the default fonts are loaded. We make sure that all web fonts are loaded using a standard WordPress hook by a process referred to as enqueuing, which is a adding them to a list (or queue) of tasks that WordPress performs when it starts up. Our plugin uses another standard WordPress hook to remove (or dequeue) the task of loading the fonts. Thus, the theme starts up with no web fonts loaded.
The themes on our network were developed by people who are good at what they do. They make use of a font stack, which is a list of fonts in a font family declaration. Example #4 in the CSS below illustrates a font stack. If it is to be used, the default web font is the first font listed in the font stack. If it’s unavailable, the next font in the font stack is loaded until it finds one that’s available. In Example #4 below, activating our plugin to dequeue the task of loading the web font will mean that it’s not available to a visitor’s browser, so sans-serif, the next font in the font stack, will be used.
If you simply want to remove web fonts and are happy with the next font in the font stack of your theme, you’ve wrapped up your typography work by activating our plugin. Similarly, if you want to keep the default fonts but add to them, you can skip activating the plugin described in this step.
Load Your Selected Fonts
For users that want to push typography beyond the next font in the font stack, there’s more work to do. Now that you’ve stopped loading the default fonts, you’re in a position to load your own selections.
Loading custom font selections necessarily involves customizing your theme’s CSS, so let’s start by making use of Jetpack, a tool that supports custom CSS. If you only want to customize CSS and don’t plan to use other features of Jetpack, you can run Jetpack without a connection to WordPress.com. Whether you’re running Jetpack with or without a WordPress.com connection, be sure to activate Jetpack’s custom CSS module in order to change your selected fonts.
With Jetpack and its custom CSS module activated, you’re in a position to load your selected fonts using an @import rule. The examples below show loading a single font in its default weight as well as loading multiple fonts in multiple weights.
Let’s use the StudioPress Outreach Pro theme as an example. By default, this theme loads Google’s Lato web font. For the body element, it specifies the Lato font family in a font weight of 400. Adding the @import rule from Example #3 above to your theme’s custom CSS loads Google’s Source Sans Pro font. If we didn’t activate one of our wpPERFORM.com plugins to dequeue loading default fonts, then Source Sans Pro would be loaded in addition to Lato.
Loading Source Sans Pro puts you in a position to use that font in the weights specified in your @import rule in other styling. Example #4 puts the Source Sans Pro font to use by specifying it in a weight of 300, which replaces Lato in a weight of 400. Keep in mind, these CSS changes replace or add to the theme’s default CSS. To stick with the font weight of 400, you wouldn’t need to put this styling in your custom CSS since it’s already present in the theme’s default CSS. Further, it’s a good idea to put @import rules at the very top of your custom CSS active declarations (i. e., ignoring comments).
For most Google web fonts, the default weight is 400. If you’re only loading the default weight, you don’t need to include the weight in the rule. The font family by itself is sufficient to specify the font you want to load. However, if you’re loading multiple weights, the convention is to include all weights, including the default weight, in the rule, as shown in Example #3 above.
When you’re developing a site, you can experiment with different fonts and load a lot of them. However, the more fonts and weights you load, the more you add to your site’s page weight. Therefore, it’s important to strike a balance between using many different typographical styles and minimizing page weight.
Hopefully, our tools make it easy for you to load and make use of the fonts you choose. If you encounter any roadblocks, just open a support ticket.