Skip to content

Title H1 font-family isn't updating #65

@wdawson

Description

@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:

Screenshot 2023-07-07 at 10 37 56

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:

Screenshot 2023-07-07 at 10 42 04

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:

Screenshot 2023-07-07 at 10 43 52

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions