Dumb noob question but how do I change the font?

[remiconnesson]

I tried changing in tailwind.config.ts but it did not work and I can't find the instruction in the documentation.

Where am I supposed to change the font?

When I remove nuxt-typography I can see my fonts, so the tailwindcss.config.ts is correct (I installed the font with fontsource and import them in layouts/default.vue)

---

nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  extends: '@nuxt-themes/typography',
  modules: ['@nuxt/content', '@nuxtjs/tailwindcss', '@vueuse/nuxt'],
  content: {
    documentDriven: true,
    highlight: {
      // See the available themes on https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-theme
      theme: {
        dark: 'github-dark',
        default: 'github-light'
      }
    }
  },
  app: {
      head: {
          link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }]
      }
  },
})

layouts/default.vue

<script setup lang="ts">
import '@fontsource/inter/variable-full.css'
import '@fontsource/jetbrains-mono'
</script>

<template>
  <div>
    <p>Custom Layout</p>
    <hr/>
    <slot />
  </div>
</template>

tailwind.config.ts

import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

export default <Partial<Config>>{
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
        mono: ['Jetbrains Mono', ...defaultTheme.fontFamily.mono],
      },
    },
  }
}

[bdrtsky]

Hey @remiconnesson

Totally normal question. Sorry it wasn't mentioned in docs yet.

We use Pinceau for styling. You can set tokens, like typography.font.body in tokens.config file - https://github.com/nuxt-themes/typography/blob/main/tokens.config.ts#L105

The other, less preferred way is to overwrite :root CSS variable, like --typography-font-body.

Note that you need to handle font loading, font-face etc yourself, as currently there's no built-in solution for that.

Feel free to ask if you still have questions.

[d0rich]

I was able to use fonts from tailwind in nuxt typography.

First step - turn off preflight. This issue solved most of my problems: https://github.com/Tahul/pinceau/issues/32.

// nuxt.config.ts
defineNuxtConfig({
   pinceau: {
      preflight: false
   }
})

Then I tried to specify Pinceau fonts as class selectors from tailwind and it just worked :D

// tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
  typography: {
    font: {
      body: '.font-sans',
      code: '.font-mono'
    }
  }
})

[remiconnesson]

@d0rich thanks it works great! I'm just encountering an issue with the Inline code block

It resolves to .font-mono which overrides what is set by tailwind:

I'm piercing through by @apply using a :deep() selector which is ok with me

But I'm curious about what is happening at the css level

[d0rich]

@remiconnesson, I'm glad that it was helpful 😃

Actually, I faced this issue with inline code block. In fact, this tokens config just provide invalid css style value (.font-mono). So browser uses other valid styles.

I have implemented a more elegant workaround using tailwind plugins: https://d0rich.me/blog/2023-05-09-how-to-use-nuxt-typography-with-tailwindcss

[remiconnesson]

This is great! And your blog is very cool :) thank you so much