{"id":23510828,"url":"https://github.com/danielkov/next-typography","last_synced_at":"2025-10-25T17:06:12.150Z","repository":{"id":40313761,"uuid":"309136698","full_name":"danielkov/next-typography","owner":"danielkov","description":"Add Typography.js styles to your Next JS app in the simplest possible way.","archived":false,"fork":false,"pushed_at":"2025-03-27T02:32:43.000Z","size":377,"stargazers_count":0,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T22:02:02.280Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielkov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-01T16:21:23.000Z","updated_at":"2021-02-12T13:56:54.000Z","dependencies_parsed_at":"2022-08-09T17:02:14.790Z","dependency_job_id":"7c8d224e-c62e-42c3-bdcb-b2b65bfab155","html_url":"https://github.com/danielkov/next-typography","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielkov%2Fnext-typography","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielkov%2Fnext-typography/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielkov%2Fnext-typography/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielkov%2Fnext-typography/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielkov","download_url":"https://codeload.github.com/danielkov/next-typography/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253990503,"owners_count":21995776,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-25T12:12:32.757Z","updated_at":"2025-10-25T17:06:12.076Z","avatar_url":"https://github.com/danielkov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Add [Typography.js](https://kyleamathews.github.io/typography.js/) styles to your [Next JS](https://nextjs.org/) application in the simplest possible way.\n\n## Getting started\n\n```shell\nyarn add next-typography\n```\n\n**_`pages/_app.jsx`_**\n\n```jsx\nimport NextTypography from \"next-typography\";\nimport typography from \"my/typography/setup\";\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003c\u003e\n      \u003cNextTypography typography={typography} /\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Loading Google Fonts\n\nYou can load your Google fonts via this component too. There are 3 settings to font loading provided via the `googleFontLoading` property:\n\n1. \"none\" (default) - No fonts will be loaded\n2. \"single\" - append a single `\u003clink /\u003e` element. This option can be faster with traditional HTTP(S) connections, however there are caveats:\n   1. HTTP2 can load your fonts in parallel, potentially descreasing time to load depending on the amount of fonts you're loading.\n   2. The likelihood of the request being served from cache (due to a different website loading the same fonts) decreases drastically.\n3. \"multiple\" - append a `\u003clink /\u003e` element for each Google Font to be loaded.\n\n### Example\n\n**_`pages/_app.jsx`_**\n\n```jsx\nimport NextTypography from \"next-typography\";\nimport typography from \"my/typography/setup\";\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003c\u003e\n      \u003cNextTypography typography={typography} googleFontLoading=\"multiple\" /\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielkov%2Fnext-typography","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielkov%2Fnext-typography","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielkov%2Fnext-typography/lists"}