Use variable font weight with inter in nextjs app

Question

I just set up a nextjs app and want to use the variable Inter font, but I cant set the font weight.

import Head from "next/head";
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { Inter } from "next/font/google";
import Layout from "@/components/Layout/Layout";
import styles from "@/styles/Main.module.css";

const inter = Inter({
  subsets: ["latin"],
});

export default function App({ Component, pageProps }: AppProps) {
  const title = "App title";

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content="description" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout>
        <style jsx global>{`
          html {
            font-family: ${inter.style.fontFamily};
          }
        `}</style>

        <main className={`${styles.main}`}>
          <Component {...pageProps} />
        </main>
      </Layout>
    </>
  );
}

But anywhere in my app where I want to set a different font weight, the font weigt doesn't change.

If I inspect the rendered text, it uses '__Inter_Fallback_44d352' so it looks like it maybe not be using the variable font at all?

What am I missing here?

Sizo Develops · Answer 1 · 2023-03-26T13:12:59.167

0

In the docs they specify something like this

_app.js

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { Inter, Roboto } from 'next/font/google'

const inter = Inter({
  weight: ['400', '900'],
  subsets: ['latin'],
})
export default function App({ Component, pageProps }: AppProps) {
  
  return (
    <>
     <style jsx global>{`
    html {
      font-family: ${inter.style.fontFamily};
    }
  `}</style>
  <Component {...pageProps} />
    </>
   )
}

Then on your styling you can just

font-weight: 400 !important

It seems like next keeps overwriting the weight setting it to important seemed to fix it though

edited Mar 26 '23 at 13:12

answered Mar 26 '23 at 12:50

Sizo Develops

118
1
8

It's a variable font so that didn't make a difference. – Sventies Mar 26 '23 at 13:00
Just updated my answer hope it works for you too – Sizo Develops Mar 26 '23 at 13:13
It seemed this patch version of next has a bug? Or anyway, it wasn't loading the fonts at all. – Sventies Mar 26 '23 at 13:40

score 0 · Accepted Answer · answered Mar 26 '23 at 13:37

0

I tested this on a slightly older project, which uses next v13.2.1, and I fixed it by bumping back the next version from 13.2.4 to 13.2.1

answered Mar 26 '23 at 13:37

Sventies

2,314
1
28
44

Use variable font weight with inter in nextjs app

2 Answers2