0
234
ViewsFont 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.
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: [],
}
1 answers
Answer question0
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