<h1>Ascent Override</h1> 
<h1 class="adjusted">Ascent Override</h1>

/* local Arial bold */
@font-face {
  font-family: "Arial Bold";
  src: local(Arial Bold);
}

body {
  font-family: "Arial Bold"; 
}

/* Override Local Arial Bold as a new family */
@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

h1.adjusted {
  color: blue;
  font-family: "Ascent Adjusted Arial Bold";
}






* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;
  display: grid;
  place-items: center;
  grid: [stack] 1fr / [stack] 1fr;
}

h1 {
  grid-area: stack;
  font-size: calc(1rem + 8vw);
  mix-blend-mode: multiply; 
  color: red;
  border: 1px solid;
}