Next.js Discord

Discord Forum

Font twitching

Calliope Hummingbird posted this in #help-forum
Open in Discord
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}`}>

export default RootLayout

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

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

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

4 Replies

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, 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
Calliope HummingbirdOP
Unfortunately, nothing has changed

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