Using a different font for headings (custom theme)

[kolaente]

Hi!

I'm trying to use a different font for my headings and text. In my custom theme, I have this in the package.json defined:

  "slidev": {
    "defaults": {
      "fonts": {
        "heading": "Josefin Sans",
        "sans": "Open Sans",
        "mono": "Fira Code"
      },
      "hightlighter": "prism"
    }
  }

I then tried to set the font to josefin sans for all headings via the layout.css:

.slidev-layout {
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }
}

I think I could probably just do the "classic" font-family: 'Josefin Sans' here instead of using @apply but that feels kind of hacky - and I want to use the automatic font loading slidev provides me.
Edit: Using font-family directly does not work because the font is not loaded.

I've never used windicss before but am really comfortable using tailwind.