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.

[wdawson]

Looking into this more, the h1 element that is generated as part of the Article Header is outside of the div with the "prose" class, so that's likely why this isn't getting picked up. Would the alpine theme need to adjust its templates to have a parent "prose" element? Or should this be fixed/adressed here?