{"id":4533,"date":"2022-08-01T09:59:24","date_gmt":"2022-08-01T15:59:24","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=4533"},"modified":"2024-01-04T08:42:20","modified_gmt":"2024-01-04T14:42:20","slug":"font-techniques-wordpress-themes","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/font-techniques-wordpress-themes\/","title":{"rendered":"Font Techniques for Modern WordPress Themes"},"content":{"rendered":"\n

For the last few years, fonts on the web have been a rather significant bottleneck for performance. This impacts our end users. Typography choices are imperative to providing a consumable experience, but at what cost?<\/p>\n\n\n\n

Let’s explore some font techniques that can help us offer a faster experience in our WordPress themes.<\/p>\n\n\n\n

\n
\n
<\/path><\/svg><\/div><\/div>\n\n\n\n

The more you know!<\/strong><\/p>\n<\/div>\n\n\n\n

A common misconception is that @font-face<\/code> is what triggers a font to be downloaded. However, it is not until the font is used that it actually called, e.g. h1, h2, h3, h4, h5, h6 { font-family: \"Open Sans\"; }<\/code><\/p>\n<\/div>\n\n\n\n

Static & Variable fonts<\/h2>\n\n\n\n

Variable fonts have been around since the 90s but did not truly start gathering momentum until Apple, Adobe, Microsoft, Google, and some key type foundries collaborated to create OpenType Font Variations (aka variable fonts) for the OpenType specification (mid-2016).<\/p>\n\n\n\n

Fast forward to 2022, and many independent designers and large foundries have created hundreds of variable fonts. <\/p>\n\n\n\n

A single variable font can serve a variety of design axes, but in a single file. Whereas, a static font will serve a specific weight or style for each design variation.<\/p>\n\n\n\n

\n

Static<\/strong> font example with multiple weights.<\/p>\n\n\n

\/* Open Sans - Regular [static] *\/<\/span>\n<\/span><\/span>@font-face<\/span> {\n<\/span><\/span>\tfont-display<\/span>: swap;\n<\/span><\/span>\tfont-family<\/span>: 'Open Sans'<\/span>;\n<\/span><\/span>\tfont-style<\/span>: normal;\n<\/span><\/span>\tfont-weight<\/span>: 400<\/span>;\n<\/span><\/span>\tsrc<\/span>: url<\/span>('OpenSans-Regular-webfont.woff2'<\/span>) format<\/span>('woff2'<\/span>);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>\/* Open Sans - Bold [static] *\/<\/span>\n<\/span><\/span>@font-face<\/span> {\n<\/span><\/span>\tfont-display<\/span>: swap;\n<\/span><\/span>\tfont-family<\/span>: 'Open Sans'<\/span>;\n<\/span><\/span>\tfont-style<\/span>: normal;\n<\/span><\/span>\tfont-weight<\/span>: 700<\/span>;\n<\/span><\/span>\tsrc<\/span>: url<\/span>('OpenSans-Bold-webfont.woff2'<\/span>) format<\/span>('woff2'<\/span>);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>\/* Open Sans - Bold Italic [static] *\/<\/span>\n<\/span><\/span>@font-face<\/span> {\n<\/span><\/span>\tfont-display<\/span>: swap;\n<\/span><\/span>\tfont-family<\/span>: 'Open Sans'<\/span>;\n<\/span><\/span>\tfont-style<\/span>: italic;\n<\/span><\/span>\tfont-weight<\/span>: 700<\/span>;\n<\/span><\/span>\tsrc<\/span>: url<\/span>('OpenSans-BoldItalic-webfont.woff2'<\/span>) format<\/span>('woff2'<\/span>);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>\/* Open Sans - more font weights ... *\/<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre><\/div>\n\n\n\n
\n
Variable<\/strong> font example with multiple weights.<\/p>\n\n\n
\/* Open Sans [variable] *\/<\/span>\n<\/span><\/span>@font-face<\/span> {\n<\/span><\/span>\tfont-display<\/span>: swap;\n<\/span><\/span>\tfont-family<\/span>: 'Open Sans'<\/span>;\n<\/span><\/span>\tfont-stretch<\/span>: 100%<\/span>;\n<\/span><\/span>\tfont-weight<\/span>: 300<\/span> 600<\/span>;\n<\/span><\/span>\tsrc<\/span>: url<\/span>('fonts\/OpenSans-VariableFont_wdth,wght.woff2'<\/span>) format<\/span>('woff2 supports variations'<\/span>),\n<\/span><\/span>\t\t\turl<\/span>('fonts\/OpenSans-VariableFont_wdth,wght.woff2'<\/span>) format<\/span>('woff2-variations'<\/span>);\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre><\/div>\n\n\n\n
It is easy to look at those code examples and think: I should definitely use variable fonts, because it is a single file and the syntax is more concise. However, there is a lot more to consider. So, sit back and grab a cup of coffee \u2615\ufe0f (or your favorite drink). Let’s dive into some of the nuances.<\/p>\n\n\n\n
Variable font axes<\/h2>\n\n\n\n
Say what? Variable fonts allow for multiple axes, including ital<\/code>, wdth<\/code>, and wght<\/code>. This is arguably the best feature of variable fonts. Historically, different font weights and styles required unique, separate font files. However, variable fonts introduce axes for the user to manipulate slant, weight and width, and all within a single font file.<\/p>\n\n\n\n
Since there is only one file to include on your site, then ideally there is a performance benefit. However, it greatly depends on which variable font you use, which features you choose to use, what format and subset you use, and how you package it all up for serving to your users.<\/p>\n\n\n\n
Let’s focus on an example and compare how we might use a traditional static font versus a variable font.<\/p>\n\n\n\n
Static vs. Variable font comparison<\/h2>\n\n\n\n
Let’s take a common font like Open Sans<\/a> and compare how we might use it in a real-world theme with static and variable font differences. First, we’ll use these common rules for comparing the different formats:<\/p>\n\n\n\n