Closed MarioAda closed 1 week ago
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:
Install the @nuxt/fonts
module:
npm install @nuxt/fonts
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
],
},
})
Ensure that the font is available in your project:
public
directory or use a CDN to load the font.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.
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";
Would you be able to provide a reproduction? 🙏
This issue was closed because it was open for 7 days without a reproduction.
The default Tailwind sans font family is:
As per their docs: https://tailwindcss.com/docs/font-family
They recommend extending it by doing:
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.