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•2y ago

Message Not Public

Leonidas•2y 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•2y ago

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