I recently integrated the Raleway font into my minimalist Next.js application with Tailwind CSS. I downloaded the font family in .ttf format and converted it to .woff2, but I'm having trouble changing the font weight using custom classes like font-bold or font-extrabold permanently. Although the Raleway font initially displays correctly, it seems to revert back to a different style after a page refresh.
I suspect this issue might be related to the font block transitioning to the font swap period. Below is an excerpt from 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;
}
}
Here's a snippet from my tailwind.config.js file as well:
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
fontFamily: {
raleway: ['Raleway', 'sans-serif'],
},
},
},
plugins: [],
}