5 replies

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.

TTC

Theo's Typesafe Cult•4y ago•

5 replies

amanuel

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.

How to use several fonts in Nextjs?

Similar Threads

How to use several fonts in Nextjs?

Similar Threads

Similar Threads

Similar Threads