fonts icon indicating copy to clipboard operation
fonts copied to clipboard

Not loading any custom fallback fonts

Open MarioAda opened this issue 7 months ago • 2 comments

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.

MarioAda avatar Jul 26 '24 16:07 MarioAda