Custom Font

[tamagoez]

I want to use custom font.
I'm planning to use Google Fonts (this).

I set theme.config.js like this.

export default {
...
  font: false,
...
}

And I add fonts.css like this.

@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');

font-family: 'Sawarabi Gothic', sans-serif;

To deal it every pages, I changed _app.js

import 'nextra-theme-docs/style.css'
import './fonts.css'

export default function Nextra({ Component, pageProps }) {
  return <Component {...pageProps} />
}

But, it still doesn't work.
What should I do?

---

P.S.
This discussion was written in Oct 13, 2021 (maybe outdated).
What I did might be legacy steps.
Anyway, I'm using latest Nextra.
package.json

    "nextra": "latest",
    "nextra-theme-docs": "latest",

[dimaMachina]

Maybe to set font-family on some tag?

html {
  font-family: …
}

[tamagoez]

Thanks, I will try it.

[pyk]

For those who want to use custom font in Nextra, now you can use @next/font.

Here is how to setup:

Create pages/_app.tsx in your nextra app, and add the following content:

import { Inter } from "@next/font/google";

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

export default function MyApp({ Component, pageProps }) {
    return (
        <main className={inter.className}>
            <Component {...pageProps} />
        </main>
    );
}

Replace Inter with your specified google font.

Restart your dev server. done.

👉 Learn more about @next/font

[shuding]

Hey would you like contribute to our docs? Like adding a page for custom fonts here: https://nextra.site/docs/guide (code)

[bryanbarrios]

This will result in two <main> tags.

[nickarvanitas]

Changing pages/_app.mdx to pages/_app.tsx allowed me to add a custom font via Next, but caused issues with some default browser CSS overriding my tailwindcss (I think since _app.tsx was loading in slower.)

I instead opted to add '@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');' to my globals.css file, and set html to use the font-family: Inter to get it to work.

[shavtge]

I think changing pages/_app.mdx to pages/_app.tsx affects performance cause the logs say:

[nextra] Found "_app.tsx" file, refactor it to "_app.mdx" for better performance

The reason you have refactored the file is to avoid this error when we add the const inter declaration:

 ⨯ ./pages/_app.mdx
Unexpected `VariableDeclaration` in code: only import/exports are supported

So why not make a React component for it:

// components/Main.tsx
import { Inter } from "@next/font/google";
const inter = Inter({ subsets: ["latin"] });

export default function Main({ children }) {
  return <main className={inter.className}>{children}</main>;
}

And use it in _app.mdx like so:

import Main from "@/components/Main";

export default function Nextra({ Component, pageProps }) {
  return (
    <Main>
      <Component {...pageProps} />
    </Main>
  );
}

[sammid37]

Hi.
I'm experiencing a similar problem, but with the Geist font.

I also tried to use a React Component just as you suggested. But I still got the error message: "SyntaxError: Cannot use import statement outside a module".

Here's my code:

/docs/pages _app.js

import 'nextra-theme-docs/style.css';
import Main from '../@/components/Main';

export default function Nextra({ Component, pageProps }) {
  return <Main>
    <Component {...pageProps} />
  </Main>
}

/docs/@/components/Main.tsx

import { ReactNode } from 'react';
import { GeistSans } from 'geist/font/sans';
import { GeistMono } from 'geist/font/mono';

interface MainProps {
  children: ReactNode;
}

export default function Main({ children }: MainProps) {
  return <main className={GeistMono.className}>{children}</main>;
}

[rohanmayya]

Same error as sammid37

[arno-fukuda]

That's a Geist issue not working on pages router:
vercel/geist-font#59

[kylefraser]

Alternative solution via applying the font in the head. This avoids having a duplicate main.

// fonts.ts
import { Inter } from 'next/font/google';

export const inter = Inter({ subsets: ['latin'] });

// pages/_app.mdx
import { inter } from '../fonts';

export default function Nextra({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        :root {
          --font-inter: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  );
}

Use with tailwind:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)', ...],
      },
    },
  },
};

Use with css file:

/* styles.css */
html {
  font-family: var(--font-inter);
}

The same can be done for local fonts and may be a workaround for vercel/geist-font#59.

// fonts.ts
import localFont from 'next/font/local';

export const geist = localFont({
  src: './fonts/GeistVF.woff2', //font file located in fonts folder created at root
  weight: '100 900',
  display: 'swap',
});

Follow the same process as above by importing geist from fonts.ts.

[kazoomarc]

where to create fonts.ts file and How to add geist font if you installed it in your project via npm install geist?