COLRv1 Color Gradient Vector Fonts in Chromium 98

Shipping in Chromium 98 (currently in beta) is support for COLRv1 Color Gradient Vector Fonts. This is a pretty exciting addition, I must say!

COLRv1 enables powerful 2D graphics glyph definitions (gradients, transforms), supports variations, and reuses existing glyph contour definitions.

Previous color font formats embed bitmap files into the OpenType font containers. They do not scale with high quality and have a large binary size. OpenType SVG embeds vectors and scales better but requires complex parsers and rasterisers and does not interact with OpenType variations.

Instead of embedding bitmaps for emoji or entire SVGs, COLRv1 contains shapes vector glyphs that can be layered on top of each other. This allows shape reuse and results in smaller-sized fonts.

The Noto Color Emoji Font is already available as a COLRv1 variant, and is used in this demo that shows an emoji picker:

~

Do note that COLRv1 fonts support more than just emoji. It also supports that are purely vector based:

Here’s a reference rendering of that last demo:

~

COLRv1 Color Gradient Vector Fonts in Chromium 98 →

Prevent Layout Shifts between Web Fonts and Fallback Fonts with the size-adjust @font-face descriptor

You know something good’s landed when two out of the three great Web/CSS resources — here Smashing Magazine and web.dev (*) — write about the same topic: the size-adjust descriptor for @font-face.

To improve font rendering, a great technique is font swapping. The problem however, is that sometimes when the web font loads, it shifts the entire page around since it presents at a slightly different box height size.

By putting size-adjust in the @font-face rule, it sets a global glyph adjustment for the font face. Timing this right will lead to minimal visual change, a seamless swap.

Available in Chromium 92 and (flagged) Firefox 89 at the time of writing. Up-to-date list on “Can I Use …”.

The posts contain links to tools to help you define the perfect size-adjust value.

(*) The third one of the bunch being CSS-Tricks

google-webfonts-helper — A Hassle-Free Way to Self-Host Google Fonts

To self-host Webfonts from Google Fonts — which you should — there’s google-webfonts-helper which you can use. They offer the entire Google Fonts catalog and provide a way to easily download the fonts and accompanying CSS snippets you need.

google-webfonts-helper

CC Symbols – A webfont with Unicode-compatible Creative Commons license symbols

New in Unicode 13 is the addition of the Creative Commons License symbols (along with 5382 other characters):

  1. U+0229C No derivatives
  2. U+1F16D Creative Commons
  3. U+1F16E Public Domain
  4. U+1F16F Attribution
  5. U+1F10D No rights reserved
  6. U+1F10E Share-alike
  7. U+1F10F Non-commercial

Daniel Aleksandersen was quite excited to use these on his site, but then noticed:

No system fonts — font files pre-installed with operating systems — support these new characters yet. Even if some system fonts added these characters today, the updated versions won’t reach visitors’ devices until a couple of years from now.

To solve this he created a minimal webfont CC Symbols that only contains the copyright symbol (U+00A9) and the 7 new CC license symbols.

To use it, load it as a webfont and limit its use to only the 8 characters it supports with unicode-range

@font-face {
  font-display: swap;
  font-family: CCSymbols;
  font-synthesis: none;
  src: url(CCSymbols.woff2) format(woff2),
       url(CCSymbols.woff)  format(woff);
  unicode-range: u+a9, u+229c,
                 u+1f10d-f, u+1f16d-f;
}

body {
  font-family: Helvetica,
               sans-serif,
               CCSymbols;
}

Nice work, Daniel!

New font with Unicode-compatible Creative Commons license symbols →
CC Symbols (Direct Download) →

A Variable Fonts Primer

Now that Google Fonts has some Variable Fonts in their offering, this primer on Variable Fonts might come in handy:

Variable fonts let you add nuance and artistry to your web typography without bogging down your site. Now you can accomplish what used to require several files with a single file and some CSS!

The goal of this site is to show you how variable fonts tick. Discover how they can benefit user interface (UI) design, accessibility, and long-form reading, and how they push the boundaries of skillful typographic expression on the web.

A Variable Fonts Primer →

🚨 Do note that this site’s homepage is very CPU intensive. Chrome just starts pooping bricks because of the font constantly being animated.

Should you self-host Google Fonts?

Google Fonts is great, but it also has a downside: it affects your page’s waterfall (during which some render-blocking may occur, as it involves CSS) as explained by Barry Pollard:

The problem is that your website (say www.example.com) loads the stylesheet from fonts.googleapis.com, which returns some CSS made up of font-face declarations.

This means you have to connect to fonts.googleapis.com, download the CSS, then connect to fonts.gstatic.com to download the actual fonts.

Fonts are often discovered late by the browser when loading a page (as you need to download the CSS to see them) but Google Fonts are discovered extra late, as you need to download the CSS from another domain, then the fonts from a 3rd domain and, as discussed above, making an HTTPS connection takes time.

This post goes really deep into how it all works. Covers things such as rel="preconnect", font-display: swap;, etc.

Should you self-host Google Fonts? →

🔥 Harry Roberts said it before: Self-Host your Static Assets

Control Google Fonts font loading with font-display

As of late May Google Fonts has added support for a display querystring parameter. Using it you can control the CSS font-display Property which allows you to control what happens while the font is unavailable.

Specifying https://fonts.googleapis.com/css?family=Roboto&display=swap as the font to load, will yield the following:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Google Fonts: Using font-display
font-display explainer →

How to use variable fonts in the real world

Richard Rutter (@clagnut):

Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way.

Always great to see how others went head first into a problem. Be sure to checkout the Ampersand website itself too, it’s lovely.

How to use variable fonts in the real world →

Related: What do Variable Fonts mean for Web Developers? will give you a good introduction about what they are. Read this one before reading Richard’s post.

Fontastic Web Performance

Emojineer Monica Dinculescu:

Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost — if you don’t load web fonts efficiently, what you get instead are phantom underlines, blank pages, and user rage. Let’s talk about ways to avoid this, and what new platform features are here to help us deliver pretty (but also!) fast experiences to everyone.

By using CSS font-display you can tweak how browsers should behave.

The accompanying “Font-display playground” is a small explainer accompanying this talk. In short, the essence of how font-display works can be boiled down to this image:

Font-display playground →

What do Variable Fonts mean for Web Developers?

Variable Fonts are still in active development […] in this article I’ll focus on what they mean for web developers, and how you can try them out today ahead of time.

Next to changes to font-weight (which will allow increments of 1), you also have fine control over a variable font its variations – see image above. One can tweak ‘m via the upcoming font-variation-settings CSS Property:

p {
  font-variation-settings: 
    'cntr' 99.9998, 
    'grad' 176, 
    'opsz' 13.999, 
    'srfr' 34.998, 
    'wdth' 803.999, 
    'wght' 175.98, 
    'xhgt' 999.988;
}

As mentioned in the post, variable fonts in CSS will land in production no earlier than mid-2018. Nonetheless it’s worth following already.

What do Variable Fonts mean for Web Developers? →