Next js 13 and tailwind not loading google fonts

Question

I've been using google font in a project but for some reason they are nolonger downloading. I'm getting the error:

error - Failed to download `Inter` from Google Fonts. Using fallback font instead.
error - Failed to download `Source Serif Pro` from Google Fonts. Using fallback font instead.
error - Failed to download `DM Sans` from Google Fonts. Using fallback font instead.

The App.js code:

import Layout from "@/components/Layout";
import "@/styles/globals.css";
import { Inter, DM_Sans, Source_Serif_Pro } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const source = Source_Serif_Pro({
  subsets: ["latin"],
  weight: ["400", "600", "700", "900"],
  variable: "--font-source",
});
const dm = DM_Sans({
  subsets: ["latin"],
  weight: ["400", "500", "700"],
  variable: "--font-dm",
});

export default function App({ Component, pageProps }) {
  return (
    <main className={`${inter.className} ${dm.variable}  ${source.variable}`}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </main>
  );
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
 ...
    extend: {
            fontFamily: {
        inter: ["var(--font-inter)"],
        dm: ["var(--font-dm)"],
        source: ["var(--font-source) "],
      },
    },
  },
  plugins: [],
};

utility:

<h1 className=" font-source ">

I've tried intalling the font package using @next/font as well as deleting the node module and install it again but didn't work.

were you able to fix this? – blockhead Jul 18 '23 at 10:35 — blockhead, Jul 18 '23 at 10:35

score 0 · Answer 1 · answered Jul 01 '23 at 19:11

I am new to NextJS but its working for me:

//file:/lib/font.ts

    import { Roboto_Mono as FontMono, Roboto as FontSans } from "next/font/google"
    export const fontSans = FontSans({
        subsets: ["latin"],
        variable: "--font-sans",
        weight: ['300', '400', '500', '700', '900']
    })
    
    export const fontMono = FontMono({
        subsets: ["latin"],
        variable: "--font-mono",
        weight: ['300', '400', '500', '700']
    })

then Imported the font in Layout.tsx (i am using app router)

import { fontSans } from '@/lib/fonts';

then used it

<body className={ fontSans.className} >

Next js 13 and tailwind not loading google fonts

1 Answers1