Title H1 font-family isn't updating

[wdawson]

I'm hopeful that this is the correct repository for this issue, though the problem may be somewhere else. If so, please point me in that direction.

I used the Alpine theme quick start, which, through a series of dependencies, pins this repo at version 0.11.0.

I'm trying to have the headings show in serif font rather than sans-serif. I have added the following to my tokens.config.ts:

export default defineTheme({
  // ...
  typography: {
    font: {
      display: "{font.serif}",
      body: "{font.sans}",
      code: "{font.mono}",
    },
  },
}

This ends up rendering the following:

As you can see, every header except the title is rendered with the serif font. Looking at the inspector for the computed font-family for the title h1 element I see:

where app.vue contains:

<template>
  <AppLayout>
    <NuxtPage />
  </AppLayout>
</template>

<style>
html {
  font-family: $dt('font.sans');
}
</style>

Meanwhile, the h2 element I see this in the inspector:

which pulls from ProseH2.vue

I would expect that the display token would also work for the h1 title, but maybe there's a different workaround intended? I couldn't find much by googling or in any documentation so any pointers are appreciated.