Font twitching
Answered
Calliope Hummingbird posted this in #help-forum
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.
tailwind config:
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')],
}
Answered by Calliope Hummingbird
Problem is solved after deploying the project on hosting
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 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
Calliope HummingbirdOP
Unfortunately, nothing has changed
I thought it was me who did something wrong. Thanks for help
I thought it was me who did something wrong. Thanks for help
Calliope HummingbirdOP
Problem is solved after deploying the project on hosting
Answer