# The Nuxt Google Fonts module can inline the fonts instead of linking them > @nuxtjs/google-fonts is a Nuxt module that adds Google Fonts to a Nuxt application through a data attribute on the root element, parses the generated head links, and can download the CSS and font files into the project, base64 encode them, and add dns-prefetch, preconnect and preload hints. It suits a Nuxt team that wants a single declarative way to set fonts, and the self hosting route is what removes the third party request. **nuxt-modules/google-fonts** — Google Fonts module for NuxtJS - Repository: https://github.com/nuxt-modules/google-fonts - Website: https://google-fonts.nuxtjs.org - Stars: 583 · Forks: 45 - Language: TypeScript - License: MIT - Published: 2026-10-22 · Updated: 2026-10-22 · Language: en - Canonical page: https://hysenlabs.com/projects/nuxt-modules-google-fonts ## One data attribute on the root element The module is described as a Google Fonts module for Nuxt, and the way it is used is the interesting part of the design. You specify fonts by name and variant, and the module parses the head links it generates to Google Fonts. The feature list puts it plainly: it creates only an external link to Google Fonts, and it parses head links. So the module does not download a font file or rewrite your CSS, it composes the URL the Google Fonts CSS API v2 expects and adds the link tags to the document head. The support for CSS API v2 matters because that is the current endpoint, and the earlier v1 API had a different shape with different parameters. The module is declared as supporting Nuxt 3 and Nuxt Bridge, which is the compatibility surface to check first, since the Nuxt Bridge layer is what lets a module written for Nuxt 3 run under a Nuxt 2 codebase. ## The performance hints are the point of doing this in a module Three of the features are about how the font request is made rather than about which font it is, and they are the reason to use a module rather than pasting a link tag yourself. The module can add dns-prefetch, which resolves the DNS name for the font host ahead of the request. It can add preconnect, which goes further and opens the connection to the font host before the request is needed, so the TLS handshake and the TCP setup happen during the idle time rather than on the critical path. And it can add preload, which tells the browser to fetch the font file early and at high priority. The last one is the meaningful change in behaviour, because a preloaded font is fetched as soon as the parser sees the preload hint rather than waiting for the stylesheet that references it to arrive. If you have ever watched a page where the text is invisible until the font loads, the preload option is the direct answer to that. The README links the Mozilla documentation for both dns-prefetch and the preconnect best practices, which is where the caveats about over-preconnecting are discussed. ## Downloading the fonts removes the external dependency The two features that change the character of the module are download css and fonts to local project, which is described as needing no external resources, and encode fonts to base64. Downloading the CSS and the font files into the project means the fonts are served from your own domain, which removes a third party DNS lookup, a third party connection and a third party availability dependency from every page view. The base64 encoding option then goes further and inlines the font data into the stylesheet itself, so there is no second request at all for the font file. The trade-offs are the ones you would expect. The font files end up in your repository and in your build output, which increases the size of your deployment and of your source tree. Base64 encoding inflates the payload by roughly a third over the binary. And the fonts are frozen at build time, so a change at Google Fonts does not reach your users until you rebuild. For a site that values a fast first paint and does not need to swap typefaces at runtime, that is a reasonable trade, and for a site that serves users from regions where fonts.googleapis.com is slow or blocked it may be the only workable option. ## The package is a Nuxt module built with the standard tooling The package manifest shows a conventional Nuxt module in the current generation style. The name is @nuxtjs/google-fonts at version 3.2.0, the type is module, sideEffects is false, and the exports map points at dist/module.cjs for require and dist/module.mjs for import, with the main and types fields alongside. Only dist is published in the files array, so the source is not shipped. The runtime dependencies are four, all from the Nuxt ecosystem, with @nuxt/kit and @nuxt/schema at 3.16.1 or newer, pathe for cross platform path handling, and google-fonts-helper at 3.7.3 or newer, which is the piece that knows how to build the Google Fonts URLs and parse the responses. The scripts show the standard module builder flow, with build running nuxt-module-build build, dev launching the playground with nuxi dev playground, and dev:prepare doing a stub build plus a prepare pass plus nuxi prepare playground. The release script is a good model to copy, since it runs the tests, then prepack, then changelogen --release --push, then publish. The package manager is pinned to pnpm 10.6.5 and the module is published with public access. ## Working on the module, and the test setup The contributing section offers two ways to work on the module, and the local path is a five step list. Clone the repository, install dependencies using pnpm install, prepare the development server using pnpm dev:prepare, build the module using pnpm build, and launch the playground using pnpm dev. The playground/ directory at the repository root is the harness for that, since a module with no consumer of its own is hard to develop against. The test script runs the linter and then vitest with coverage, using @vitest/coverage-v8 and @nuxt/test-utils, and the repository carries a test/ directory alongside src/, docs/ and the .nuxtrc file. The dev dependencies are pinned to latest rather than to exact versions, which is the convention in Nuxt module templates and means the build tracks the current Nuxt release rather than a known good one. There is an eslint.config.js, a tsconfig.json, a renovate.json for dependency updates and a .npmrc, and the release history shows v3.2.0 from 2024-03-14 with v3.1.3 and v3.1.2 both from 2023-12-13, while the last push was on 2026-10-17, so the code is being worked on more recently than the last release. ## Conclusion Adopt @nuxtjs/google-fonts when you run Nuxt 3 and want Google Fonts configured from one place with the option of serving the font files yourself, and when a render-blocking request to fonts.googleapis.com is a problem you care about. Do not adopt it if you need a font provider other than Google Fonts, since the module is built around the Google Fonts CSS API. Verify first that the Nuxt version in your project is within the supported range, whether the download and encode option is what you want given it puts font binaries in your repository, and that the font variants you name are the ones Google actually serves for your language and weight combination. ## FAQ ### What does the Nuxt Google Fonts module actually do to my page? It adds an external link to Google Fonts based on the fonts and variants you name, parses the head links it generates, and can add dns-prefetch, preconnect and preload hints for the font host. It supports the Google Fonts CSS API v2 and works with Nuxt 3 and Nuxt Bridge. ### Can the module serve Google Fonts without calling Google? Yes. It can download the CSS and the font files to your local project, so no external resources are needed, and it can encode the fonts to base64 so the font data is inlined into the stylesheet rather than fetched in a second request. ### How do I work on the module locally? Clone the repository, run pnpm install, prepare the development server with pnpm dev:prepare, build the module with pnpm build, and launch the playground with pnpm dev. The test script runs eslint and then vitest with coverage, and the module can also be developed in CodeSandBox. ### What are the dependencies of @nuxtjs/google-fonts? Four runtime dependencies, @nuxt/kit and @nuxt/schema at 3.16.1 or newer, google-fonts-helper at 3.7.3 or newer, and pathe. The package is published as @nuxtjs/google-fonts at version 3.2.0 under the MIT licence, with only the dist directory shipped to npm. ## Sources - [License: MIT](https://github.com/nuxt-modules/google-fonts/blob/main/LICENSE) - [nuxt-modules/google-fonts on GitHub](https://github.com/nuxt-modules/google-fonts) - [Project website](https://google-fonts.nuxtjs.org) - [README](https://github.com/nuxt-modules/google-fonts/blob/main/README.md) - [Releases](https://github.com/nuxt-modules/google-fonts/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/nuxt-modules-google-fonts