Virtual font

by phloe

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=Orelega+One&display=swap" rel="stylesheet"-->

<h1>
Hello you silly cow of a human being
</h1>

<button>
Click here
</button>

CSS

@font-face{
  font-family: Publik;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    url(https://www.dr.dk/global/fonts/DRPublik-SemiBold-9860ac45dcc6d54a81010c70b01e7000.woff2) format("woff2"),
    url(https://www.dr.dk/global/fonts/DRPublik-SemiBold-5116bfed56a2de9ddc671dd715851128.woff) format("woff");
  size-adjust: calc((1000 / 690) * 100%);
  ascent-override: calc(((690 + 200) / 1000) * 100%);
  descent-override: calc((200 / 1000) * 100%);
}

@font-face{
  font-family: Publik-lower;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    url(https://www.dr.dk/global/fonts/DRPublik-SemiBold-9860ac45dcc6d54a81010c70b01e7000.woff2) format("woff2"),
    url(https://www.dr.dk/global/fonts/DRPublik-SemiBold-5116bfed56a2de9ddc671dd715851128.woff) format("woff");
  size-adjust: calc((1000 / 500) * 100%);
  ascent-override: calc(((500 + 200) / 1000) * 100%);
  descent-override: calc((200 / 1000) * 100%);
}

@font-face {
  font-family: 'Orelega One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/orelegaone/v10/3qTpojOggD2XtAdFb-QXZFt93kY6ah7E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  _size-adjust: calc((4096 / 2480) * 100%);
  _ascent-override: calc(((2480 + 801) / 4096) * 100%);
  _descent-override: calc((801 / 4096) * 100%);
  line-gap-override: 100%;
  /*
  capHeight: 2480,
  ascent: 3296,
  descent: -801,
  lineGap: 369,
  unitsPerEm: 4096,
  xHeight: 1840
  */
}

body {
  font-family: "Orelega One";
 
  --orelega-ascender: 0.8046875;
  --orelega-cap-height: 0.60546875;
  --orelega-descender: 0.195556640625;
  --orelega-line-gap: 0.090087890625;
  --ascender: var(--orelega-ascender, 1);
  --cap-height: var(--orelega-cap-height, 0.69);
  --descender: var(--orelega-descender, 0.2);
  --line-gap:...