Google Fonts OpenType Features: What’s Missing and Why

If you use Google Fonts to deliver custom typefaces for your website, you might not be aware that you’re probably not getting every available OpenType feature that the font designer included in the font.

This might not matter to a lot of site designers, who may only design with the basic features of a typeface in mind, such as weights, styles (such as italics) and perhaps more common OpenType features such as ligatures.

However, if you’re on this site and a user of CSS Type Studio, you probably care more about typography than most designers, in which case these missing OpenType features may matter to you a lot.

Why Google Fonts Strips OpenType Features

One of the advantages of using Google Fonts is the speed at which these fonts are delivered. This matters a lot for page rendering because it avoids the brief flash of unstyled content that happens while the browser is waiting for the font to load.

Not only do you benefit from the speed of the Google CDN, but because so many sites use Google Fonts, if you are using a popular font there’s a decent chance that your site visitors will already have the font in the browser cache, thus avoiding the need to download the font again.

Another tactic that Google Fonts uses to speed up delivery is to make the font files smaller. It does this by stripping out less well-known features such as numerical variants, discretionary and historical ligatures, small caps, and more. The original file size for a typeface that includes a full set of OpenType features can be more than a megabyte, so removing these glyphs can result in significant space savings.

But perhaps the biggest file savings comes from subsetting. Google Fonts takes the original font and splits it into smaller files, and then specifies unicode-range in the @font-face rule in the stylesheet. When a browser encounters this rule, it checks the page content for any characters within the specified unicode ranges. Files for unicode ranges that aren’t used by the page aren’t downloaded. This can result in large savings because many well-designed typefaces include characters for multiple writing systems, such as Cyrillic and Vietnamese. If your website only uses Latin characters (for a website written in English, for example), unicode-range rule will prevent those characters for other languages from being downloaded.

How much can this save? I did a test with the popular font Merriweather on a page using only Latin characters. When served from Google Fonts, the font download was 370 kb. In contract, a woff2 file containing the full, original Merriweather font weighs in around 2.49 mb.

Which OpenType Features Are Affected?

Here’s a list of OpenType features that are often stripped from Google Fonts:

It’s not always obvious when OpenType features are missing from a font. For example, if small caps are requested but are missing from the font, browsers will simulate small caps by scaling down the full height caps. Superficially, this can look fine, but when you compare the synthesized version of small caps with small caps that are created by a font designer, the differences can be very apparent.

How to Check If a Feature Is Available on Google Fonts

CSS Type Studio serves full versions of fonts, so you can use the app or browse the font library to explore the OpenType features available in any font. The library has a section titled OpenType Features, which makes it easy to find fonts that contain the OpenType feature you’re looking for.

To compare this with the Google Fonts version, set up a test page and use the CSS stylesheet provided by Google Fonts. If you have a CSS Type Studio subscription, you can easily grab the CSS code needed to activate the OpenType features in your HTML.

Should you use Google Fonts?

If you don’t need all the OpenType features of a font, it’s probably best to use a CDN like Google or Adobe Fonts. Faster loading times is an important part of user experience, especially on mobile browsers that may not have good cellular connections.

However, if typography is an important part of your design, then using the original fonts will ensure that your users are seeing the typeface as the designer intended.

How to Self-Host Fonts to Preserve OpenType Features

All of the fonts found on CSS Type Studio are open source and can be found on Github. You can search Github directly, or browse the font library and use the download link.

Most of the fonts are TrueType (ttf). TrueType is an older, well-supported font format, but is missing some features found in the newer Web Open Font Format (WOFF), such as advanced compression. You can serve a .ttf file from your server with gzip or Brotli encoding, but the woff2 format reorganizes the glyph data table in a font to improve compression efficiency and achieve smaller file sizes than you can achieve by using compression alone on a TrueType file.

Tactics to save weight

If you have a TrueType file, the first thing you can do is to convert it to a WOFF2 file. The Python library fonttools is handy for this. Once you’ve installed fonttools, the follow terminal command will perform the conversion:

fonttools ttLib.woff2 compress -o <output filename>.woff2 <input filename>.ttf

You can also use fonttools to subset a font. This will, for example, remove language support from a font that you don’t need. This is a little more complicated because you need to specify the Unicode ranges of the characters you want to keep. The example below will keep the Basic Latin and Latin-1 Supplement characters (which includes commonly used symbols, such as math and currency symbols):

pyftsubset MyFont.ttf --unicodes=U+0000-00FF --flavor=woff2 --output-file=MyFont-latin.woff2 --recalc-bounds --recalc-timestamp

To learn more, read the section on font subsetting in the fonttools docs. You can refer to this table of Unicode characters to identify the ranges you need for your project.