Browser default font loads instead of fallback font

Question

I'm struggling to get my fallback font to load properly. I've got arial dialed in as a fallback font with the help of the new ascent-override, descent-override, and size-adjust properties.

But when the page loads, instead of it being Arial that loads, then my web font, I'm seeing the browser default (in this case) serif font.

CSS

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato'), local('Lato-Regular'), url(https://my-media-server-url.com/static-4/webfont/lato/Lato-Regular.woff) format('woff');
}

@font-face {
    font-family: "Lato-Fallback-Arial";
    src: local("Arial");
    ascent-override: 101.3181%;
    descent-override: 21.865%;
    size-adjust: 97.4159%;
}

h1.main__title {
  font-family: Lato, Lato-Fallback-Arial, sans-serif;
}

.main__title {
  font-size: var(--text-4xl);
  font-weight: bold;
  line-height: 1.2;
}

And the relevant HTML is just an <h1 class="main__title">Story title here</h1>

I expect the page to load with Arial for the font in the h1 tag and then swap out with Lato once that loads.

I actually see the default serif font as per the browser's default for an h1 tag, then Lato loads, and it appears the Arial is never used at all.

I can't seem to figure out what I'm doing wrong. Insight appreciated :)

Answer 1

EDIT:

It is not possible, the fallback font gets used if the request for the "normal" font can not be completed. So if the font can't be found or the request times out.

So the browser uses its default font and then when Lato is loaded, switches to lato. It is not able to use a different font while loading.