Nuxt•3w ago

nuxt/fonts - same font name, different weights

Hey guys, i am trying to use the same font name but different weights. Using local provider.

  fonts: {
    families: [
      { name: 'Mark-WXX', src: '/fonts/mark-wxx-book.woff2', weight: 'normal' },
      { name: 'Mark-WXX', src: '/fonts/mark-wxx.woff2', weight: '800' },
    ],
  },

  fonts: {
    families: [
      { name: 'Mark-WXX', src: '/fonts/mark-wxx-book.woff2', weight: 'normal' },
      { name: 'Mark-WXX', src: '/fonts/mark-wxx.woff2', weight: '800' },
    ],
  },

I am expecting that I can now use tailwind classes like ".font-normal" for the mark-wxx-book.woff2 font and ".font-bold" for mark-wxx.woff2. But it is always showing the normal weight. Any hint?

3 Replies

kapa.ai•3w ago

Hi @mavo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To answer your question about using the same font name with different weights in Nuxt Fonts, I'll need to provide some context and suggestions based on the available information. First, it's important to note that the Nuxt Fonts module is designed to simplify the process of loading web fonts in Nuxt applications. However, the specific configuration you're using isn't directly covered in the provided knowledge sources. That being said, I can offer some general guidance based on Nuxt's styling and font handling approaches: 1. Local Font Files: Nuxt recommends placing local font files in the ~/public/ directory as mentioned in the Nuxt documentation (https://nuxt.com/docs/getting-started/styling#working-with-fonts). Your approach of using /fonts/ seems to align with this recommendation. 2. Font Face Declaration: Instead of relying solely on the Nuxt Fonts module configuration, you might want to consider declaring your font faces explicitly in a CSS file. This approach gives you more control over the font weights and styles. Here's an example of how you could do this:

   @font-face {
     font-family: 'Mark-WXX';
     src: url('/fonts/mark-wxx-book.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: 'Mark-WXX';
     src: url('/fonts/mark-wxx.woff2') format('woff2');
     font-weight: 800;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: 'Mark-WXX';
     src: url('/fonts/mark-wxx-book.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: 'Mark-WXX';
     src: url('/fonts/mark-wxx.woff2') format('woff2');
     font-weight: 800;
     font-style: normal;
     font-display: swap;
   }

You can place this CSS in your assets/css/main.css file and include it in your Nuxt configuration as shown in the Nuxt documentation (https://nuxt.com/docs/getting-started/styling#the-css-property). 3. Tailwind Configuration: To ensure Tailwind CSS recognizes your custom font and its weights, you might need to update your Tailwind configuration. Here's an example of how you could do this:

   // tailwind.config.js
   module.exports = {
     theme: {
       extend: {
         fontFamily: {
           sans: ['Mark-WXX', 'sans-serif']
         },
         fontWeight: {
           normal: 400,
           bold: 800
         }
       }
     }
   }

   // tailwind.config.js
   module.exports = {
     theme: {
       extend: {
         fontFamily: {
           sans: ['Mark-WXX', 'sans-serif']
         },
         fontWeight: {
           normal: 400,
           bold: 800
         }
       }
     }
   }

This configuration tells Tailwind to use your 'Mark-WXX' font as the default sans-serif font and maps the 'normal' and 'bold' weights to the appropriate values. 4. Using the Fonts: After setting up your font faces and Tailwind configuration, you should be able to use your fonts with Tailwind classes as you expected:

   <p class="font-normal">This text should use Mark-WXX Book</p>
   <p class="font-bold">This text should use Mark-WXX Bold</p>

   <p class="font-normal">This text should use Mark-WXX Book</p>
   <p class="font-bold">This text should use Mark-WXX Bold</p>

Remember that the Nuxt Fonts module is relatively new, and its documentation is still being developed. The approach I've suggested combines Nuxt's standard font handling with Tailwind CSS configuration, which should give you more control over your font weights. If you're still experiencing issues after trying these steps, you might want to check your browser's developer tools to ensure the correct font files are being loaded and applied. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@504323709310468117> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mavoOP•3w ago

solved the issue. fixed bei kapa.ai 👍

Gaming

Programming

nuxt/fonts - same font name, different weights