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](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

[github-actions[bot]]

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