https://github.com/danielkov/next-typography
Add Typography.js styles to your Next JS app in the simplest possible way.
https://github.com/danielkov/next-typography
Last synced: 8 months ago
JSON representation
Add Typography.js styles to your Next JS app in the simplest possible way.
- Host: GitHub
- URL: https://github.com/danielkov/next-typography
- Owner: danielkov
- Created: 2020-11-01T16:21:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-27T02:32:43.000Z (about 1 year ago)
- Last Synced: 2025-04-08T22:02:02.280Z (about 1 year ago)
- Language: TypeScript
- Size: 368 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
Add [Typography.js](https://kyleamathews.github.io/typography.js/) styles to your [Next JS](https://nextjs.org/) application in the simplest possible way.
## Getting started
```shell
yarn add next-typography
```
**_`pages/_app.jsx`_**
```jsx
import NextTypography from "next-typography";
import typography from "my/typography/setup";
function MyApp({ Component, pageProps }) {
return (
<>
>
);
}
```
## 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 `` 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 `` element for each Google Font to be loaded.
### Example
**_`pages/_app.jsx`_**
```jsx
import NextTypography from "next-typography";
import typography from "my/typography/setup";
function MyApp({ Component, pageProps }) {
return (
<>
>
);
}
```