<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://plex-vf-cdn.now.sh/style.css" />
  <title>Plex Variable Demo</title>
</head>

<body>
  <h1>About</h1>
  <p>IBM Plex is a typeface design by Mike Abbink in collaboration with Bold Monday.</p>
  <p>
    The css rules demonstrate how to implement the plex variable font progressively.
  </p>
  <h2>Font Sources</h2>
  <p>
    https://plex-vf-cdn.now.sh/Italic.woff2</p>
  <p>https://plex-vf-cdn.now.sh/Roman.woff2</p>
  <p>https://plex-vf-cdn.now.sh/style.css</p>

</body>

</html>
/* Copied from https://plex-vf-cdn.now.sh/style.css */

/* Import fallback stylesheet */
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans');

/* Define variable font faces */
@font-face {
  font-family: 'Ibm Plex Sans Variable';
  src: url('https://plex-vf-cdn.now.sh/Roman.woff2') format('woff2-variations'),
    url('https://plex-vf-cdn.now.sh/Roman.woff2') format('woff2');
  font-weight: 100 700;
  font-stretch: 85 100;
  font-display: fallback;
}

@font-face {
  font-family: 'Ibm Plex Sans Variable';
  src: url('https://plex-vf-cdn.now.sh/Italic.woff2') format('woff2-variations'),
    url('https://plex-vf-cdn.now.sh/Italic.woff2') format('woff2');
  font-weight: 100 700;
  font-width: 85 100;
  font-display: fallback;
  font-style: italic;
}

/* First give the fallback styling */
body {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  text-align: center;
}

/* If variable fonts are supported, use the new font-family 
and define some css helper variables */
@supports (font-variation-settings: normal) {
  body {
    font-family: 'IBM Plex Sans Variable', 'Helvetica Neue', Arial, sans-serif;
  }

  :root {
    --thin: 'wght' 100, 'wdth' 100;
    --extra-light: 'wght' 200, 'wdth' 100;
    --light: 'wght' 300, 'wdth' 100;
    --regular: 'wght' 400, 'wdth' 100;
    --text: 'wght' 450, 'wdth' 100;
    --medium: 'wght' 500, 'wdth' 100;
    --semi-bold: 'wght' 600, 'wdth' 100;
    --bold: 'wght' 700, 'wdth' 100;
    --thin-condensed: 'wght' 100, 'wdth' 85;
    --extra-light-condensed: 'wght' 200, 'wdth' 85;
    --light-condensed: 'wght' 300, 'wdth' 85;
    --regular-condensed: 'wght' 400, 'wdth' 85;
    --text-condensed: 'wght' 450, 'wdth' 85;
    --medium-condensed: 'wght' 500, 'wdth' 85;
    --semi-bold-condensed: 'wght' 600, 'wdth' 85;
    --bold-condensed: 'wght' 700, 'wdth' 85;
  }
  
  h1, h2, h3, h4 {
    font-variation-settings: var(--semi-bold);
  }

  p {
    font-variation-settings: var(--text-condensed);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.