---
title: "Web font loaded from a font CDN (perf/font-link)"
description: "A <link> or @import to Google Fonts/Typekit is render-blocking CSS from another origin, and the font files then come from a third origin: text paints late and swaps in (layout shift)."
url: http://localhost:4173/rules/perf/font-link
updated: 2026-11-11
---

# Web font loaded from a font CDN

> `perf/font-link` is a vetd rule. It flags: Web font loaded from a font CDN. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `perf/font-link` |
| Severity | warning |
| Group | Performance: fonts, images, scripts and bundle |
| Tags | performance, nextjs-16, lighthouse |

## Why it matters

A <link> or @import to Google Fonts/Typekit is render-blocking CSS from another origin, and the font files then come from a third origin: text paints late and swaps in (layout shift).

## How to fix it

Load the font with next/font/google or next/font/local: self-hosted, preloaded, with a size-adjusted fallback.

## Credit

Based on work by:

- [Next.js team](https://nextjs.org): next/font self-hosts font files at build time, so text does not wait on a font CDN request or shift when it swaps in.

## References

- [Font Optimization](https://nextjs.org/docs/app/getting-started/fonts), Next.js
- [Font Module](https://nextjs.org/docs/app/api-reference/components/font), Next.js
- [Best practices for fonts](https://web.dev/articles/font-best-practices), web.dev
- [Eliminate render-blocking resources](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources), Chrome for Developers

## See it

Demos in the vetd Lab:

- [Load fonts with next/font](http://localhost:4173/lab/nextjs/next-font)
- [Load fonts without shift](http://localhost:4173/lab/web-perf/font-loading-without-shift)

## Related rules

- [`perf/font-display`](http://localhost:4173/rules/perf/font-display.md)
- [`perf/sync-script`](http://localhost:4173/rules/perf/sync-script.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "perf/font-link" }`. CLI: `npx vetd explain perf/font-link`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`tailwind/arbitrary-z-index`](http://localhost:4173/rules/tailwind/arbitrary-z-index.md) · Next: [`perf/font-display`](http://localhost:4173/rules/perf/font-display.md)