Add Typography.js styles to your Next JS application in the simplest possible way.

Getting started

yarn add next-typography

pages/_app.jsx

import NextTypography from "next-typography";
import typography from "my/typography/setup";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextTypography typography={typography} />
      <Component {...pageProps} />
    </>
  );
}

Loading Google Fonts

You can load your Google fonts via this component too. There are 3 settings to font loading provided via the googleFontLoading property:

1. "none" (default) - No fonts will be loaded
2. "single" - append a single <link /> element. This option can be faster with traditional HTTP(S) connections, however there are caveats:
   1. HTTP2 can load your fonts in parallel, potentially descreasing time to load depending on the amount of fonts you're loading.
   2. The likelihood of the request being served from cache (due to a different website loading the same fonts) decreases drastically.
3. "multiple" - append a <link /> element for each Google Font to be loaded.

Example

pages/_app.jsx

import NextTypography from "next-typography";
import typography from "my/typography/setup";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextTypography typography={typography} googleFontLoading="multiple" />
      <Component {...pageProps} />
    </>
  );
}