N
Nuxt•14h ago
mykhaylotymofyeyev

nuxt/fonts + tailwind 4 + google fonts Error: Unknown font format

hello, i am trying to use a google font in my project. the font is declared using the new tailwind config in css token this is wha the nuxt/fonts documentation say about how to setup it in this case fonts: { provider: 'google', experimental: { processCSSVariables: true, }, }, without it I get only the default browser font rendered, but whit it i get the following error: ERROR Pre-transform error: Unknown font format
Plugin: nuxt:fonts:font-family-injection File: /Users/..../assets/css/main.css
2 Replies
kapa.ai
kapa.ai•14h ago
Hi @mykhaylotymofyeyev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems you're encountering an issue while trying to use Google Fonts with Nuxt and Tailwind. Let's address this based on the information provided in the knowledge sources. The error you're seeing suggests there might be a configuration issue or incompatibility between the different components you're using. However, the knowledge sources don't provide specific information about this exact error. To help resolve this, I can suggest a few approaches based on the available information: 1. First, make sure you're using the latest version of @nuxtjs/google-fonts module. According to the Nuxt Fonts documentation, you should use this module for integrating Google Fonts with Nuxt. 2. In your nuxt.config.ts, try configuring the Google Fonts module like this: 
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/google-fonts',
  ],
  googleFonts: {
    families: {
      // Add your desired font families here
    }
  }
})
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/google-fonts',
  ],
  googleFonts: {
    families: {
      // Add your desired font families here
    }
  }
})
3. For Tailwind configuration, you can set up your font in the tailwind.config.ts file as shown in this Stack Overflow answer: 
/** @type {import('tailwindcss').Config} */
export default {
    content: [],
    theme: {
        extend: {
            fontFamily: {
                sans: ['YourGoogleFont', 'sans-serif']
            }
        },
    },
}
/** @type {import('tailwindcss').Config} */
export default {
    content: [],
    theme: {
        extend: {
            fontFamily: {
                sans: ['YourGoogleFont', 'sans-serif']
            }
        },
    },
}
4. Make sure your main.css file is properly imported in your Nuxt configuration: 
export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
  ],
  // other configurations...
})
export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
  ],
  // other configurations...
})
If these steps don't resolve the issue, you might need to check for any conflicts between the Nuxt Fonts module and your Tailwind configuration. The error suggests a problem with font format recognition, which could be related to how the font is being loaded or processed. Unfortunately, the knowledge sources don't provide more specific information about this particular error. If the problem persists, you might want to check the GitHub issues for the @nuxtjs/google-fonts module or consider reaching out to the Nuxt community forums for more targeted assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•14h ago
<@698065994559651850> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?