Adventure on Improving QoL via Fonts

Recently, I received a quest from one of the UX designers on our team to improve Quality of Life by using specific glyph from a font. For example, the letter small case ‘L’ with a tail instead of the one which looks like the letter ‘I’. To help you visualise what I meant, see the picture below.

Different font character variant

Hence, as a software engineer contributing some codes into component library of our project. I turned on my raccoon mode and start digging and burrowing around on how to achieve this using CSS.

Caution: The rest of the content might be technical intensive, please prepare a cup of coffee before continuing. Thank you.

At first, I thought this quest might end up being aborted because when I look at font specimen on Google Fonts there isn’t any possibility of having different variant of alphabet (FYI, our team is using Inter font).

Fortunately, after that I received a quest hint from our dear UX designer on how this can be possible as Figma was able to control how the font can be changed with a few clicks on the screen and churn out a CSS like how a magician pull a rabbit out of the a random hat.

Here is the exact CSS I was given

font-feature-settings: 'cv01' on, 'cv05' on

With hope and excitement, I copypasta-ed this piece of CSS into my code and viola!

It didn’t work….

So what does this CSS suppose to do? Why didn’t this piece of code have any effect? What went wrong?

According to the CSS documentation:

The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.

So what does `cv01` and `cv05` means?

After much digging around on the Internet, I found this website which provides me with more information. https://rsms.me/inter/#features/

Back to the CSS code.. Ideally, the CSS should have worked since I have tried to turn “on” the different character variant 01 and 05 which is number ‘1' and letter ‘L’ respectively.

So WHY this doesn’t work?

I check back at our project setup, we are loading our fonts from Google CDN.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">

I tried replacing the font to be fetched from “rsms.me” site which I found earlier for the different character variants and finally the CSS code is working!

Wait!

What has changed? Why does it work now but not when I load it from Google?

Trying to understand a bit more on this, I tried to open the font stylesheet by navigating to the URL.

Looking at one of the font-face defined

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Downloading the font from the URL in the src properties, I got a 38KB file which is significantly smaller than the same font downloaded from GitHub. This means we are actually getting the subset of font instead of all possible glyphs that the font originally has. This could be the reason why we won’t get the the character variant when we apply the CSS code.

To confirm the above hypothesis, I used a font viewer to explore the WOFF2 file, it revealed more information of Google font file. Indeed, there are only 345 glyphs present in the file while the one I downloaded from Github has about 2548 glyphs.

So what’s next? How can I resolve the issue?

To overcome this, I had to abandon the idea of using Google font and self-host the font. Include the font CSS and files into our component library so we can import and use this font in our projects. However, this comes with a small downside of having users of our application needing to download that extra kilobytes worth of font file.

There are ways out there where we could optimize the way we load fonts but probably need me to drop down a rabbit hole. So I will not go into further details for now. However, for those who are interested, can refer to this article: https://css-tricks.com/the-best-font-loading-strategies-and-how-to-execute-them/#loading-fonts-with-self-hosted-fonts

After all the troubleshooting, now I will appreciate the small difference in the I and L in any web application out there, or after you have read this, I hope that you will also be able appreciate the efforts people have made to save your eyes while reading words that contain both capital ‘I’ and small letter ‘L’.