What's the T3 way to load a font from google fonts?

above, I have it in _document.tsx right now

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=block"
            rel="stylesheet"
          ></link>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=block"
            rel="stylesheet"
          ></link>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

17 Replies

Unknown User•3y ago

Message Not Public

Leonidas•3y ago

Use a custom css file with @font-face. That is the official way how browsers lazily load fonts. Also you can use that outside of next projects https://google-webfonts-helper.herokuapp.com/fonts/jost?subsets=latin this tool automatically generates the css and font files for you You will put these into your public dir and specify the href to the css file inside the link - „component“

barry•3y ago

I use the new @next/font thing Should work for v12 too

anderjaskaOP•3y ago

I tried it with v12 it doesn’t work

barry•3y ago

npm i @next/font import { Font } from “@next/font/google” Works for me

anderjaskaOP•3y ago

Also don’t you need to use the app folder for it to work in 13

barry•3y ago

const font = Font() Now use font.className in a class No

anderjaskaOP•3y ago

Interesting

barry•3y ago

Why would you It just gets a font

anderjaskaOP•3y ago

What file do you have it in?

barry•3y ago

No file just where I use it

anderjaskaOP•3y ago

_document? Ah

barry•3y ago

https://github.com/barrybtw/next13-hero

GitHub

GitHub - barrybtw/next13-hero

Contribute to barrybtw/next13-hero development by creating an account on GitHub.

barry•3y ago

I used it here Index page

Unknown User•3y ago

Message Not Public

barry•3y ago

👍 for what though lol

Unknown User•3y ago

Message Not Public

Gaming

Programming

What's the T3 way to load a font from google fonts?