Virtual font

by phloe

HTML

<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%);
}

body {
  font-family: Publik;
}

h1 {
  background-color: cyan;
  font-weight: 600;
  --line-height: 1.618033988749895;
  line-height: var(--line-height);
  margin: 1rem 0;
}

h1::before, h1::after {
  content: "";
  display: table;
  --leading: calc(((1 - var(--line-height)) / 2) * 1em);
}
h1::before {
  margin-bottom: var(--leading);
}
h1::after {
  margin-top: var(--leading);
}

button {
  background-color: red;
  color: white;
  line-height: 1.5rem;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  font-family: inherit;
  font-weight: 600;
}