nt

next-typography

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

Showing:

Popularity

Downloads/wk

0

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Readme

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} />
    </>
  );
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial