Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago
Icestonks

Fonts not loading on localhost, but it will in production?

So my fonts are not loading on localhost for some reason? I have no idea why this is happening, and it just started.

This is how i import the fonts:
//fonts.ts

import { Inter, Rubik_Mono_One } from 'next/font/google'
 
export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})
 
export const rubik_mono_one = Rubik_Mono_One({
  subsets: ['latin'],
  display: 'swap',
  weight: "400",
})


This is how I use them:
import { rubik_mono_one } from "@/app/fonts";

const Navbar: React.FC = () => {

    return (
        <div className="flex flex-row justify-between headline-color items-center px-[5%] py-7 font-bold text-base">
            <Link href="/" className="flex flex-row justify-center items-center gap-3">
                <p className={`${rubik_mono_one.className} text-lg`}>App</p>
            </Link>
Solution
Really weird, but fixed it by deleting the .next folder. Might have been an issue with the cache, don't really know.
Jump to solution
Was this page helpful?