Theo's Typesafe Cult•9mo ago

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",
})

//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>

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>