CODEWITHSUNDEEP
javascriptcssfontsnext.jstailwind-css
Jackalakalaka
Jackalakalaka

Reputation: 131

Font in Next.js / Tailwind CSS app initially bold but then unintentionally reverts

I'm working on a pretty bare bones Next app using Tailwind and I just installed a custom variable-weight font Raleway (downloaded the family in .ttf format and converted it to .woff2) but for some reason am unable to change the font weight via the font-bold, font-extrabold, etc custom classes... at least permanently. The Raleway font is successfully showing at all to begin with.

Shown below, a refresh makes the page immediately flash with what's seemingly the correct style but then reverts to something else.

The ephemeral, initially-present bold text upon refreshing.

Could it have something to do with the font block period transitioning to the font swap period? Below is my styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    @font-face {
        font-family: 'Raleway';
        src: url('/fonts/Raleway-Thin.woff2') format('woff2');
        font-weight: 400;
        font-display: swap;
        font-style: normal;
    }
}

And here's my tailwind.config.js:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        raleway: ['Raleway', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Upvotes: 1

Views: 2924

Answers (1)

hvalette
hvalette

Reputation: 106

it's because the .ttf file you converted only contains the thin weight (font-weight: 100) of the Raleway font. You need all the weight for this to work.

Example for Poppins :

 @font-face {
    font-family: 'Poppins';
    font-weight: 100;
    src: url('../assets/fonts/Poppins/Poppins-Thin.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 200;
    src: url('../assets/fonts/Poppins/Poppins-ExtraLight.ttf')
        format('truetype');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 300;
    src: url('../assets/fonts/Poppins/Poppins-Light.ttf') format('truetype');
}
...

The flash you see is the default browser font because of the display swap

Upvotes: 4

Related Questions