{"id":13760651,"url":"https://github.com/joe-bell/next-google-fonts","last_synced_at":"2025-05-10T11:30:26.679Z","repository":{"id":52436883,"uuid":"267255172","full_name":"joe-bell/next-google-fonts","owner":"joe-bell","description":"A tiny Next.js helper for loading Google Fonts fast and asynchronously ⏩","archived":true,"fork":false,"pushed_at":"2022-09-16T04:40:48.000Z","size":1246,"stargazers_count":426,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-19T07:21:51.085Z","etag":null,"topics":["font-loading","google-fonts","nextjs"],"latest_commit_sha":null,"homepage":"https://joebell.co.uk/blog/adding-google-fonts-to-next-js","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joe-bell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"joe-bell"}},"created_at":"2020-05-27T07:48:31.000Z","updated_at":"2025-03-29T17:21:37.000Z","dependencies_parsed_at":"2023-01-18T09:36:21.566Z","dependency_job_id":null,"html_url":"https://github.com/joe-bell/next-google-fonts","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-bell%2Fnext-google-fonts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-bell%2Fnext-google-fonts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-bell%2Fnext-google-fonts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-bell%2Fnext-google-fonts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joe-bell","download_url":"https://codeload.github.com/joe-bell/next-google-fonts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253409918,"owners_count":21903988,"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":["font-loading","google-fonts","nextjs"],"created_at":"2024-08-03T13:01:15.339Z","updated_at":"2025-05-10T11:30:26.449Z","avatar_url":"https://github.com/joe-bell.png","language":"TypeScript","funding_links":["https://github.com/sponsors/joe-bell"],"categories":["📦 Legacy \u0026 Inactive Projects","TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  ⚠️\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eTHIS PROJECT HAS BEEN DEPRECATED\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  As of Next.js 10.2, Google Fonts are \u003ca href=\"https://nextjs.org/blog/next-10-2#automatic-webfont-optimization\"\u003eautomatically optimized\u003c/a\u003e 🎉\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Thanks for all your love and support for this project,\n  \u003cbr /\u003e\n  \u003ca href=\"https://joebell.co.uk/twitter\"\u003eJoe\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u003cbr /\u003e\n\n\u003ch1 align=\"center\"\u003enext-google-fonts\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  A tiny \u003ca href=\"https://nextjs.org/docs/api-reference/next/head\"\u003e\u003ccode\u003enext/head\u003c/code\u003e\u003c/a\u003e helper for loading Google Fonts \u003cstrong\u003efast\u003c/strong\u003e and \u003cstrong\u003easynchronously\u003c/strong\u003e ⏩\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/next-google-fonts\"\u003e\n    \u003cimg alt=\"NPM Version\" src=\"https://badgen.net/npm/v/next-google-fonts\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/next-google-fonts\"\u003e\n    \u003cimg alt=\"Types Included\" src=\"https://badgen.net/npm/types/next-google-fonts\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=next-google-fonts\"\u003e\n    \u003cimg alt=\"Minizipped Size\" src=\"https://badgen.net/bundlephobia/minzip/next-google-fonts\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/joe-bell/next-google-fonts/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"MIT License\" src=\"https://badgen.net/github/license/joe-bell/next-google-fonts\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/next-google-fonts\"\u003e\n    \u003cimg alt=\"NPM Downloads\" src=\"https://badgen.net/npm/dm/next-google-fonts\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/joebell_\"\u003e\n    \u003cimg alt=\"Follow @joebell_ on Twitter\" src=\"https://img.shields.io/twitter/follow/joebell_.svg?style=social\u0026label=Follow\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003e Using Next.js 10? See [\"How does this compare to Next.js font optimization?\"](#how-does-this-compare-to-nextjs-font-optimization) before continuing.\n\n## Table of Contents\n\n1. [Setup](#setup)\n2. [FAQs](#faqs)\n\n## Setup\n\nIn this example, we're going to add [`Inter`](https://fonts.google.com/specimen/Inter) (specifically weights `400` and `700`) to a Next.js app.\n\nSee [joebell.co.uk](https://joebell.co.uk) for a working example.\n\n1. Add the package to your Next.js project:\n\n   ```sh\n   npm i next-google-fonts\n   ```\n\n2. Create a custom `Head` component.\n\n   It's important to acknowledge that `next-google-fonts` is a small [`next/head`][next/head] component and should **not** be nested inside [`next/head`][next/head]. To solve this, wrap both components with a `Fragment`.\n\n   ```jsx\n   // components/head.js\n   import * as React from \"react\";\n   import NextHead from \"next/head\";\n   import { GoogleFonts } from \"next-google-fonts\";\n\n   export const Head = ({ children, title }) =\u003e (\n     \u003cReact.Fragment\u003e\n       \u003cGoogleFonts href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700\u0026display=swap\" /\u003e\n       \u003cNextHead\u003e\n         \u003cmeta charSet=\"UTF-8\" /\u003e\n         \u003cmeta\n           name=\"viewport\"\n           content=\"width=device-width, initial-scale=1.0\"\n         /\u003e\n         \u003cmeta httpEquiv=\"x-ua-compatible\" content=\"ie=edge\" /\u003e\n\n         \u003ctitle\u003e{title}\u003c/title\u003e\n\n         {children}\n       \u003c/NextHead\u003e\n     \u003c/React.Fragment\u003e\n   );\n   ```\n\n3. Add the requested Google Font/s to your styles with a sensible fallback.\n   It really doesn't matter whether you're using CSS or Sass or CSS-in-JS:\n\n   ```css\n   body {\n     font-family: \"Inter\", sans-serif;\n   }\n   ```\n\n4. [Run your Next.js app](https://nextjs.org/docs/api-reference/cli#build) to see the results in action!\n\n   You should expect to see the fallback font first, followed by a switch to the Google Font/s without any render-blocking CSS warnings. Your font/s will continue to display until your app is re-hydrated.\n\n   If JS is disabled, only the fallback font will display.\n\n## FAQs\n\n- [How does this compare to Next.js font optimization?](#how-does-this-compare-to-nextjs-font-optimization)\n- [Why?](#why)\n\n### How does this compare to Next.js font optimization?\n\nNext.js 10 introduced [automatic Google Font optimization](https://github.com/vercel/next.js/pull/14746), you can make a decision on which solution to use based on the following criteria:\n\n- \"My fonts are **not priority** and can be loaded **asynchronously**\" - use `next-google-fonts`.\n- \"My fonts **are priority** and should **not** be loaded **asynchronously**\" - use `Next.js` font optimization.\n\nFor further reading, see the [Next.js issue discussion](https://github.com/vercel/next.js/issues/16065).\n\n### Why?\n\n`next-google-fonts` aims to make the process of using Google Fonts in Next.js more consistent, faster and painless: it preconnects to font assets, preloads and asynchronously loads the CSS file.\n\nIn the current iteration of [`next/head`][next/head], we can't make use of the familiar \"media hack\" method of asynchronous Google font loading:\n\n```html\n\u003c!-- Plain HTML --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700\u0026display=swap\"\n  media=\"print\"\n  onload=\"this.media='all'\"\n/\u003e\n```\n\nIf you'd like to track this issue in Next.js, you can follow it here: [Next.js#12984](https://github.com/zeit/next.js/issues/12984).\n\n[next/head]: https://nextjs.org/docs/api-reference/next/head\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoe-bell%2Fnext-google-fonts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoe-bell%2Fnext-google-fonts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoe-bell%2Fnext-google-fonts/lists"}