CSS Font Loading API

fonts.css

  h3 {
    font-weight: 600;
    font-size: calc(21px + (45 - 21) * ((100vw - 320px) / (2000 - 320)));
  }

  p {
    font-weight: 200;
    font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (2000 - 320)));
  }

fonts.html

const thin = new FontFace(
  "Public Sans",
  "url(assets/fonts/PublicSans-Thin.woff2) format('woff2'), url(assets/fonts/PublicSans-Thin.woff) format('woff')", {
    weight: "100"
  }
);

const thinItalic = new FontFace(
  "Public Sans",
  "url(assets/fonts/PublicSans-ThinItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-ThinItalic.woff) format('woff')", {
    weight: "100",
    style: "italic"
  }
);

const extraLightItalic = new FontFace(
  "Public Sans",
  "url(assets/fonts/PublicSans-ExtraLightItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-ExtraLightItalic.woff) format('woff')", {
    weight: "200",
    style: "italic"
  }
);

const extraLight = new FontFace(
  "Public Sans",
  "url(assets/fonts/PublicSans-ExtraLight.woff2) format('woff2'), url(assets/fonts/PublicSans-ExtraLight.woff) format('woff')", {
    weight: "200"
  }
);

const light = new FontFace(
  "Public Sans",
  "url(assets/fonts/PublicSans-Light.woff2) format('woff2'), url(assets/fonts/PublicSans-Light.woff) format('woff')", {
    weight: "300"
  }
);

const lightItalic = new FontFace(
  "Public Sans",
  "url(assets/fonts/PublicSans-LightItalic.woff2) format('woff2'), url(assets/fonts/PublicSans-LightItalic.woff) format('woff')", {
    weight: "300",
    style: "italic"
  }
);