CODEWITHSUNDEEP
importnext.jsgoogle-fonts
Anushka Chauhan
Anushka Chauhan

Reputation: 419

Using multiple fonts across pages in Next JS

I'm used to importing google fonts in css files and then using the font-family property. But I want to utilize the "built-in automatic self-hosting" provided by @next/font.

@next/font includes built-in automatic self-hosting for any font file.

This new font system also allows you to conveniently use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted with the rest of your static assets. No requests are sent to Google by the browser.

So far I can only import and use multiple fonts in index.js. I want to use the same fonts in another page about.js without loading the fonts again.

How can I import multiple fonts from @next/font/google and use them across pages and components?

Is there a way I can attach the fonts to particular classes or selectors?

h1 {
  font-family: "Exo 2", sans-serif;
}

Upvotes: 5

Views: 16117

Answers (5)

CodeDude
CodeDude

Reputation: 107

Setting font using css

The way to set style using css is to use font variables, you pass a css variable to the parent of the element you want to use the font in and that css varaible includes the font family

import { Exo_2 } from "@next/font/google"

exo2 = Exo_2({
    weight:"400",
    variable:"--font-exo2"
})

export default function parent() {
    return <div className={exo2.variable}></div>
}

Css

.child {
   font-family: var(--font-exo2);
}

Upvotes: 2

Hugo M&#233;ndez
Hugo M&#233;ndez

Reputation: 1

I found the Next.js documentation for pages to be unclear when it came to adding multiple fonts globally. However, I managed to solve the issue by injecting the custom CSS variable instead of using a wrapper and className.

import { type AppProps } from 'next/app';
import { DM_Sans, Inter } from 'next/font/google';
import Head from 'next/head';
import 'styles/globals.css';

const dmSans = DM_Sans({
  weight: ['400', '500', '700'],
  subsets: ['latin'],
});

const inter = Inter({
  weight: ['400', '500'],
  subsets: ['latin'],
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <style jsx global>{`
        html {
          --dm-sans-font: ${dmSans.style.fontFamily};
          --inter-font: ${inter.style.fontFamily};
        }
      `}</style>
        <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Upvotes: 0

Taras Shevchenko
Taras Shevchenko

Reputation: 311

Using 2 fonts by local and google globaly

import { Manrope } from '@next/font/google'
import localFont from '@next/font/local'

const akzidenz = localFont({
  weight: '500',
  variable: '--font-akzidenz-grotesk-pro',
  src: '../../public/fonts/Akzidenz-Grotesk-Pro/AkzidenzGroteskPro- 
  MdEx.woff2',
})

const manrope = Manrope({
 weight: '400',
 subsets: [ 'latin' ],
 variable: '--font-manrope',
})

export default function App({ Component, pageProps }: AppProps) {
 return (
  <main className={`${akzidenz.variable} ${manrope.variable}`}>
   <Component {...pageProps} />
  </main>
 )
}

After that you can use in the styling of the application according to the specified variables

Upvotes: 11

fardeen awais
fardeen awais

Reputation: 31

In short, I try this method where i can use multiple fonts on my code and apply css on it also without any problem.

Here is my code :

//app/page.js

import Image from 'next/image'
import { Poppins} from '@next/font/google'
import { Anton} from '@next/font/google'
import styles from './page.module.css'

const poppins = Poppins({ weight: '400', subsets: ['latin']  })
const anton = Anton({ weight: '400', subsets: ['latin']  })

export default function Home() {
  return (
    <main className={styles.main}>
      <div  >
        <h1 className={styles.heading}><span className={anton.className}> Hello </span></h1>
      </div>
      <div  >
        <h2 className={styles.heading}><span className={poppins.className}> Hello </span></h2>
      </div>
    </main>
  )
}

You see i use heading and apply styles on it and after that i can use span in inside the heading tag and apply the fonts that i want to use

Upvotes: 0

Anushka Chauhan
Anushka Chauhan

Reputation: 419

We cannot attach @next/font/google fonts to particular classes using font-family because they have different names when imported.

element image

We can reuse fonts by doing this:

  1. Create a separate utils/fonts.js file:
import { Exo_2, Noto_Sans } from "@next/font/google";

export const titleFont = Exo_2({
  weight: ["500", "600", "700"],
  subsets: ["latin"],
});

export const textFont = Noto_Sans({
  weight: ["500", "600", "700"],
  subsets: ["latin"],
});
  1. Import the fonts required in pages/index.js:
import { textFont, titleFont } from "../utils/fonts";
  1. Use them with className property:
<main className={styles.main + " " + textFont.className}>
  <h1 className={titleFont.className}>Home Page</h1>
  <p>Hi this is the home page.</p>
</main>
  • You can do the same thing with local fonts. Just import them in fonts.js and then export their loader functions.
  • Using variable names like textFont and titleFont helps in forming a uniform system.
  • You can use the font with other styling classes by simply adding a space in between like this: {styles.main + " " + textFont.className}

Read documentation here.

Upvotes: 5

Related Questions