Not loading any custom fallback fonts

[MarioAda]

The default Tailwind sans font family is:

font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

As per their docs: https://tailwindcss.com/docs/font-family

They recommend extending it by doing:

const defaultTheme = require("tailwindcss/defaultTheme");

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Inter"', ...defaultTheme.fontFamily.sans],
      },
    },
  },
};

As per their docs: https://tailwindcss.com/docs/font-family#customizing-the-default-font

However, nuxt/fonts don't load any of the fallbacks (such as Noto Color Emoji); thus, most emojis (like the flag emojis that Noto supports) don't load on the website.

[dosubot[bot]]

To ensure that fallback fonts, especially "Noto Color Emoji," are loaded correctly in your Nuxt.js project, you can use the @nuxt/fonts module. Here is how you can configure it:

1. Install the @nuxt/fonts module:

   npm install @nuxt/fonts
   

2. Configure the module in your nuxt.config.js:

   export default defineNuxtConfig({
     modules: [
       '@nuxt/fonts',
       '@nuxtjs/tailwindcss',
     ],
     fonts: {
       families: [
         {
           name: 'Noto Color Emoji',
           local: true,
           fallback: true,
         },
         // Add other font families as needed
       ],
     },
   })
   

3. Ensure that the font is available in your project:

   • You can either host the font files locally in your public directory or use a CDN to load the font.

4. Use the font in your CSS:

   body {
     font-family: 'Noto Color Emoji', sans-serif;
   }
   

By following these steps, you can ensure that "Noto Color Emoji" and other fallback fonts are loaded correctly in your Nuxt.js project to display all emojis properly ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[MarioAda]

This reply is unrelated.

The font-family is technically: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a template for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/fonts/tree/main/example

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[github-actions[bot]]

This issue was closed because it was open for 7 days without a reproduction.