Using variable fonts with Roboto Flex

TL;DR: Use Roboto Flex instead Roboto

It’s always Roboto

Recently, I designed a website and, as usual in the last 10 years, I defaulted to use one of the excellent free Google Fonts — in this case Roboto Flex.
It was just because of aesthetical aspects, it really did fit to the other stuff I randomly clicked together in Figma. I didn’t notice this looks almost exactly like the regular Roboto font everbody uses everywhere.

When it comes to implementation, I usually use a tool called google webfonts helper to download the fonts to have them locally implemented a project, because yea.. european laws and regulations. This time, I noticed there were no styles / weights available to download for Roboto Flex — only the “Regular” weight, despite them being shown on the Google Fonts website.

Variable fonts

Digging deeper, I discovered, that Roboto Flex is designed to be a so called variable font and an upgrade to the famous Roboto font.

It’s a cool thing and you should consider trying it. You will find out about all the details, such as browser support, history and benefits, such as reduced file size, on the variable font website. I have nothing to add to what they write, so let’s see it in action.

Usually, when you want to support multiple font styles, you end up with a font definition like this

/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

Defining Roboto Flex with all it’s styles in contrast looks like this

/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  src: url(../fonts/roboto-flex/roboto-flex-v9-latin-flex.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;
}

Notice the weight-range at the font-weight rule — 100 900 indicates it makes all the font ranges in between available, so you can use any of the font-weights without taking care of individual styles.

One hint: For me, this neither works with the font file directly downloadable on Google Fonts (ttf), nor the file on the google font helper tool. I was looking for the woff2 file and on the helper tool, it seems it holds an older version for download. Long story short, you can use this link, to view how google would serve the font to you and download the working variable font file yourself: https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..900

Going full variable

With a css rule like this you can set the details of the variable font

body {
  font-family: 'Roboto Flex';
  font-variation-settings: 'wght' 397, 'wdth' 100.6, 'opsz' 13.44, 'GRAD' -0.5,
    'slnt' 0, 'XTRA' 468.6, 'XOPQ' 96.56, 'YOPQ' 78.9, 'YTLC' 514.56,
    'YTUC' 711.28, 'YTAS' 749.45, 'YTDE' -203.57, 'YTFI' 737.84;
}

I found this cool playground website to play around with the values and find your desired look of Roboto.

There’s more to the topic to discover and I will try to use it whenever possible. Thanks Google!