Next.js Discord

Discord Forum

Font twitching

Answered
Calliope Hummingbird posted this in #help-forum
Open in Discord
Avatar
Calliope HummingbirdOP
Hi everyone! I encountered the problem that after a hard reload the font is constantly twitching I did everything as in the documentation, but the problem is not resolved I can't figure it out for the second day. Please tell me what could be the problem? I use tailwind.
import type { Metadata } from 'next'
import { Rubik } from 'next/font/google'
import './globals.css'

const rubik = Rubik({
    weight: '400',
    subsets: ['latin'],
    variable: '--font-sans'
})

const RootLayout = ({ children }: { children: React.ReactNode }) => {
    return (
        <html lang='en'>
            <body className={`min-h-screen bg-background ${rubik.variable}`}>
                {children}
            </body>
        </html>
    )
}

export default RootLayout

tailwind config:
  const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */

module.exports = {
    darkMode: ['class'],
    content: [
        './pages/**/*.{ts,tsx}',
        './components/**/*.{ts,tsx}',
        './app/**/*.{ts,tsx}',
        './src/**/*.{ts,tsx}',
    ],
    prefix: '',
    theme: {
        extend: {
            fontFamily: {
                sans: ['var(--font-sans)', ...fontFamily.sans],
            },
            
        },
    },
    plugins: [require('tailwindcss-animate')],
}
Image
Answered by Calliope Hummingbird
Problem is solved after deploying the project on hosting
View full answer

4 Replies

Avatar
joulev
Are you in dev mode? Try prod mode. It shouldn’t happen in prod mode (npm run build then npm start)
In dev mode there’s already a fix for this in nextjs https://github.com/vercel/next.js/pull/60175, but it’s only in canary for now, so wait until a new stable version is released. If you want to get the fix right now, install and use next canary
Avatar
Calliope HummingbirdOP
Unfortunately, nothing has changed

I thought it was me who did something wrong. Thanks for help
Avatar
Calliope HummingbirdOP
Problem is solved after deploying the project on hosting
Answer