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

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

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>