Google Sans Flex

The open variable next generation of Google's brand typeface — six axes including roundedness and grade, with weights from hairline 1 to 1000.

Website Google Fonts

Font settings

Weight400

Width100

Slant0°

Optical size18

Grade0

Roundness0

These settings in CSS

.google-sans-flex {
  font-family: "Google Sans Flex", sans-serif;
}

Waterfall

The quick brown fox jumps over the lazy dog

Character set

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%&*()[]{}<>,.;:'"?/—–-+=

Paragraph

Typography is the craft of endowing human language with a durable visual form. It shapes how words are read, felt and remembered — from wayfinding on a station platform to the small print of a contract. Good type disappears into reading; great type gives a voice to the text.

Install

Google Fonts

Embed in the <head> of your HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,slnt,wdth,wght,GRAD,ROND@6..144,-10..0,25..151,1..1000,0..100,0..100&display=swap" rel="stylesheet">

Use Google Sans Flex in CSS

/* <weight>: use a value from 1 to 1000 */

.google-sans-flex {
  font-family: "Google Sans Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
}

Fontsource

Install from npm

npm install @fontsource-variable/google-sans-flex

Import once in your app entry

// Supports weights 1-1000
import "@fontsource-variable/google-sans-flex";

Use in CSS

body {
  font-family: "Google Sans Flex Variable", sans-serif;
}

Self-host

Google Fonts and Fontsource serve stripped builds — most OpenType features are removed. Self-hosting the original files is the only way to get the full feature set.

Download the font files from the website and serve them yourself:

Declare with @font-face

@font-face {
  font-family: "Google Sans Flex";
  src: url("/fonts/google-sans-flex.woff2") format("woff2");
  font-display: swap;
}

Details

Designer: David Berlow / Font Bureau
Foundry: Google
Licence: OFL
Format: Variable (wght, wdth, opsz, slnt, ROND, GRAD)
Variable axes: wght, wdth, opsz, slnt, ROND, GRAD

Open sibling of the proprietary Google Sans — same brand voice, but freely licensed and fully variable.