div
  h1.ff-lato This is font 'Lato'
  h1.ff-licorice This is font 'Licorice'
  h1.ff-open-sans This is font 'Open Sans'
  h1.ff-pushster This is font 'Pushster'
  h1.ff-roboto This is font 'Roboto'
  h1.ff-spline-sans This is font 'Spline Sans'
  p.ff-lato This is font 'Lato'
  p.ff-licorice This is font 'Licorice'
  p.ff-open-sans This is font 'Open Sans'
  p.ff-pushster This is font 'Pushster'
  p.ff-roboto This is font 'Roboto'
  p.ff-spline-sans This is font 'Spline Sans'
div
  h1.tds.ff-lato This is font 'Lato'
  h1.tds.ff-licorice This is font 'Licorice'
  h1.tds.ff-open-sans This is font 'Open Sans'
  h1.tds.ff-pushster This is font 'Pushster'
  h1.tds.ff-roboto This is font 'Roboto'
  h1.tds.ff-spline-sans This is font 'Spline Sans'
  p.tds.ff-lato This is font 'Lato'
  p.tds.ff-licorice This is font 'Licorice'
  p.tds.ff-open-sans This is font 'Open Sans'
  p.tds.ff-pushster This is font 'Pushster'
  p.tds.ff-roboto This is font 'Roboto'
  p.tds.ff-spline-sans This is font 'Spline Sans'
View Compiled
body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

h1,
p {
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

.tds {
  text-decoration-line: line-through;
}

.ff-lato {
  font-family: 'Lato', sans-serif;
}

.ff-licorice {
  font-family: 'Licorice', cursive;
}

.ff-open-sans {
  font-family: 'Open Sans', sans-serif;
}

.ff-pushster {
  font-family: 'Pushster', cursive;
}

.ff-roboto {
  font-family: 'Roboto', sans-serif;
}

.ff-spline-sans {
  font-family: 'Spline Sans', sans-serif;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.