Previously I discussed whether we should self-host Google fonts and talked about a WordPress Plugin call OMGF that makes the process easy. Here, I want to talk about the benefits of loading them manually particularly concentrating on using variable fonts. This is probably the future of web fonts and is one file that allows you to display different weights (and more, but we will leave that aside). Let's recap on the options we have:
Google's CDN
- Easy and it delivers the most compressed and browser compatible files
- You automatically get the latest advances such as variable fonts.
But...
- depending on the location of your visitors and server it may not be the fastest loading.
- You can't control over how you fonts load and behave.
- GDPR concerns.
OMGF WordPress plugin
- Easy to see if you can improve page loads.
- Gives control over how your fonts display.
- The free version has all that most will need.
But...
- You depend on them for the choice of font files (presently they are not serving variable fonts).
- You have to pay to set fall back fonts or remove their CSS file.
- With page builder you can't turn off Google and make it client proof.
Manually Loading
- Complete control over your fonts for free.
- Quick and easy when you know what you doing.
But...
- You need to consider where your font files are coming from.
- Need to consider site maintenance.
- Have a strategy.
Google's don't give you a web format so you either have to convert them yourself or use a service.
Google Webfont Helper was a popular resource for Google fonts, but is of limited use now. After 4 years without an update some fonts are missing, some are not displaying correctly all browsers and Google is increasing moving to variable fonts. An alternative I started to use (thanks to Zack Pyle) is Web font loader, but again it is not always carrying the latest version and when it does supply a variable font you only get the woff2 version and not all are available. As I tend to start using my theme to call Google's CDN in most cases I will grab the font files Google gives me.
my present strategy
- Where possible start the design with variable fonts provided by Google in mind. If 2 or more weights are needed this is probably the way to go. Google shows us the range of weights available for each. If you only need one weight the variable font version will be larger than needed.
- Unless I have reason otherwise I have decided to serve only woff2 which has good browser support that is only likely to get better. Mostly I can live with a small percentage seeing a system or fall-back font.
- After designing using Google's CDN I will run a speed test with GT Metrix or Speed Vitals or anything that makes it easy to find and download the font file in a load waterfall.
- With variable fonts I will upload these to https://wakamaifondue.com/beta/ to check what the font can do and grab the unicodes for it for my CSS.
- Then I rename these files and FTP them to my "fonts" folder in my child themes folder. Avoid using the root directory as you can end up with 404s if you add Custom Post Types and subdirectories to WordPress.
- Finally I add the @fontface CSS and attribution and disable the Google fonts CDN on my theme and builder.
Example CSS
@font-face {
font-family: "Work Sans";
src: url("/wp-content/themes/bb-theme-child/fonts/work-sans.woff2");
font-display: swap; /*auto, block, fallback, optional*/
font-weight: 100; /* Initially set font-weight: 100 900; to save duplicating, but it stopped me adding faux italics */
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF,U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,U+2009,U+200B, U+2013-2014, U+2018-201A,
U+201C-201E,U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face { font-family: "Work Sans";
src: url("/wp-content/themes/bb-theme-child/fonts/work-sans.woff2");
font-display: swap;
font-weight: 200;
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF,U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,U+2009,U+200B, U+2013-2014, U+2018-201A,
U+201C-201E,U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
/*Copyright:
WorkSans[wght].ttf: Copyright 2019 The Work Sans Project Authors (https://github.com/weiweihuanghuang/Work-Sans)
*/
For Preloading
/**How to preload fonts.
This shows adding via the child theme's functions.php file,
but the links can be added directly to the head code section of the theme.
***************************************************/
add_action('wp_head', function() {
<link rel="preload" as="font" href="https://example-site.com/wp-content/themes/bb-theme-child/fonts/nunito-v16-latin-regular.woff2" crossorigin>
<link rel="preload" as="font" href="https://example-site.com/wp-content/themes/bb-theme-child/fonts/nunito-v16-latin-regular.woff" crossorigin>
});
Stopping Google's CDN (Beaver Builder theme and plugin)
// module enqueued google fonts add_filter( 'fl_builder_google_fonts_pre_enqueue', function( $fonts ) { return array(); } ); // takes care of theme enqueues add_action( 'wp_enqueue_scripts', function() { global $wp_styles; if ( isset( $wp_styles->queue ) ) { foreach ( $wp_styles->queue as $key => $handle ) { if ( false !== strpos( $handle, 'fl-builder-google-fonts-' ) ) { unset( $wp_styles->queue[ $key ] ); } } } }, 101 );
I tend not to use fall-back fonts, (ie. font-family: "Work Sans", Verdana, sans-serif;) but this could change with an experiment technique called CSS text size adjust which allows you adjust a fall-back (system) font to size match the font you are loading. This could reduce the nasty change over if using font-display: swap;. Presently browser support is low.
Update
Thanks to Charles Metzger (whose comment on my You Tube video seems to have gone) I know about this alternative to matching system fonts https://meowni.ca/font-style-matcher/ .
MOBILE TEST RESULT
This is loading the Work Sans font with 4 weights used (300, 400, 700 & 800). No preloading of fonts.
https://speedvitals.com/report/two.here24.co/RUuCcc/ 99 score LCP 1.7. Googles CDN serving a Google Variable Font (preconnecting via WP Rocket).
https://speedvitals.com/report/two.here24.co/8CuWIa/ 100 score LCP 1.6. The OMGF plugin loading 4 font files for each weight.
https://speedvitals.com/report/one.here24.co/u50Cco/ 100 score LCP 1.4. Self hosted Google Variable Font
You can support my work by buying the tools I use through my affiliate links:
Discounts on these two lifetime deals:
MainWP. Discount code "digitalfreedoms" 15% off
WP Code Box. Discount code "beaverjunction" 25% off
---------------------------------------------------------------------------------------------------
WP Rocket | ShortPixel | Beaver Builder | Advanced Database Cleaner
---------------------------------------------------------------------------------------------------