Inter font not working on Safari and causing strange spacing - Stack Overflow

I havea nuxt app, where i'm using nuxt/fonts to load the fonts, for some reason on safari, the font doesn't work properly, numbers have strange spacing, and also parts of the text. When trying with a different font, the problem doesn't happen.

This happens in all the app.

tailwind.config.js

theme: {
    extend: {
        fontFamily: {
            // ! Inter shows small black heart instead of red heart
            sans: [
                "Inter",
                "Apple Color Emoji",
                "Noto Color Emoji",
                "Twemoji Mozilla",
                "EmojiOne Color",
                "Android Emoji",
                "Segoe UI Emoji",
                "sans-serif"
            ]
        },
    }
},

I havea nuxt app, where i'm using nuxt/fonts to load the fonts, for some reason on safari, the font doesn't work properly, numbers have strange spacing, and also parts of the text. When trying with a different font, the problem doesn't happen.

This happens in all the app.

tailwind.config.js

theme: {
    extend: {
        fontFamily: {
            // ! Inter shows small black heart instead of red heart
            sans: [
                "Inter",
                "Apple Color Emoji",
                "Noto Color Emoji",
                "Twemoji Mozilla",
                "EmojiOne Color",
                "Android Emoji",
                "Segoe UI Emoji",
                "sans-serif"
            ]
        },
    }
},

• fonts
• safari
• nuxt.js
• tailwind-css

Share Improve this question Follow asked Jan 30 at 23:47 Giuliano MaradeiGiuliano Maradei 2344 bronze badges 2

• What version of TailwindCSS are you using? If this is a fresh installation, TailwindCSS no longer looks for or uses tailwind.config.js by default. – rozsazoltan Commented Jan 31 at 6:03
• 1 i'm using v3, didn't updated it for the new one yet – Giuliano Maradei Commented Jan 31 at 11:56

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You're specifying too many incorrect fallback fonts. If Inter doesn't load, Apple devices will use Apple Color Emoji, which contains only emojis and no characters. On non-Apple devices, it's likely that Noto Color Emoji will be loaded instead. You need to declare the Inter font using @font-face to ensure it's available on all devices:

• Customizing your theme: @font-face - TailwindCSS v4 Docs
• @font-face directive - MDN Docs

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/path/to/Inter.woff2") format("woff2");
}

• Hello World with Noto Color Emoji

• How to apply a fallback font? - StackOverflow
• When do emoji fonts work if listed after sans-serif? - StackOverlfow
• Fallback fonts on special characters - StackOverflow

Font configuration

Starting from TailwindCSS v4, CSS-first configurations are recommended. Legacy JavaScript-based configurations can be added using the @config CSS directive, like this:

• @config directive - TailwindCSS v4 Docs

@import "tailwindcss";
@config "../../tailwind.config.js";

Regardless, from v4 onwards, you can also try the CSS configurations, and it's likely that this will become the fully accepted format by v5:

• Customizing your theme: --font-* - TailwindCSS v4 Docs

@theme {
  --font-sans:
    "Inter",
    "Apple Color Emoji",
    "Noto Color Emoji",
    "Twemoji Mozilla",
    "EmojiOne Color",
    "Android Emoji",
    "Segoe UI Emoji",
    "sans-serif"; 
}