div
  h1.f100.ff This is Roboto 100
  h1.f100i.ff This is Roboto 100 Italic
  h1.f300.ff This is Roboto 300
  h1.f300i.ff This is Roboto 300 Italic
  h1.f400.ff This is Roboto 400
  h1.f400i.ff This is Roboto 400 Italic
  h1.f500.ff This is Roboto 500
  h1.f500i.ff This is Roboto 500 Italic
  h1.f700.ff This is Roboto 700
  h1.f700i.ff This is Roboto 700 Italic
  h1.f900.ff This is Roboto 900
  h1.f900i.ff This is Roboto 900 Italic
div
  h1.f100.a This is Roboto 100
  h1.f100i.a This is Roboto 100 Italic
  h1.f300.a This is Roboto 300
  h1.f300i.a This is Roboto 300 Italic
  h1.f400.a This is Roboto 400
  h1.f400i.a This is Roboto 400 Italic
  h1.f500.a This is Roboto 500
  h1.f500i.a This is Roboto 500 Italic
  h1.f700.a This is Roboto 700
  h1.f700i.a This is Roboto 700 Italic
  h1.f900.a This is Roboto 900
  h1.f900i.a This is Roboto 900 Italic
div
  p.f100.ff This is Roboto 100
  p.f100i.ff This is Roboto 100 Italic
  p.f300.ff This is Roboto 300
  p.f300i.ff This is Roboto 300 Italic
  p.f400.ff This is Roboto 400
  p.f400i.ff This is Roboto 400 Italic
  p.f500.ff This is Roboto 500
  p.f500i.ff This is Roboto 500 Italic
  p.f700.ff This is Roboto 700
  p.f700i.ff This is Roboto 700 Italic
  p.f900.ff This is Roboto 900
  p.f900i.ff This is Roboto 900 Italic
div
  p.f100.a This is Roboto 100
  p.f100i.a This is Roboto 100 Italic
  p.f300.a This is Roboto 300
  p.f300i.a This is Roboto 300 Italic
  p.f400.a This is Roboto 400
  p.f400i.a This is Roboto 400 Italic
  p.f500.a This is Roboto 500
  p.f500i.a This is Roboto 500 Italic
  p.f700.a This is Roboto 700
  p.f700i.a This is Roboto 700 Italic
  p.f900.a This is Roboto 900
  p.f900i.a This is Roboto 900 Italic

html {
  font-family: 'Roboto', sans-serif;
}

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

h1,
p {
  text-decoration: underline;
}

.ff {
  text-decoration-thickness: from-font;
}

.a {
  text-decoration-thickness: auto;
}

[class*="f100"] {
  font-weight: 100;
}

[class*="f300"] {
  font-weight: 300;
}

[class*="f400"] {
  font-weight: 400;
}

[class*="f500"] {
  font-weight: 500;
}

[class*="f700"] {
  font-weight: 700;
}

[class*="f900"] {
  font-weight: 900;
}

[class*="00i"] {
  font-style: italic;
}