How to use several fonts in Nextjs?

Right now, my main font is Inter applied in _app.tsx like this:

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

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

<main className={inter.className}>
...

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

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

<main className={inter.className}>
...

I also want to use this font on headings: https://github.com/calcom/font/blob/main/README.md This is in my globals.css

html,
body {
    font-family: "Cal Sans", ui-sans-serif, system-ui,
        -apple-system BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue",
        "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";
    min-height: 100vh;
}

html,
body {
    font-family: "Cal Sans", ui-sans-serif, system-ui,
        -apple-system BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue",
        "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";
    min-height: 100vh;
}

Any help is appreciated. Thank you so much in advance!

GitHub

font/README.md at main · calcom/font

The home for our Cal Sans font. Contribute to calcom/font development by creating an account on GitHub.

2 Replies

nexxel•2y ago

if you want it in headings why are you applying it to the body

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Cal Sans";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Cal Sans";
}

or if you want to use next-font i would load the font file using that and make a custom heading component

amanuel•2y ago

thank you so much, is there a way to apply it directly to a p tag or something? How is import "cal-sans" used?

Gaming

Programming

How to use several fonts in Nextjs?