---
title: "@next/next/google-font-preconnect"
description: "Require `rel=\"preconnect\"` on `<link>` elements that point to `fonts.gstatic.com`"
# Generated by src/codegen/lint-rule-docs.ts. Do not edit below this line.
plugin: "nextjs"
aliases: ["nextjs/google-font-preconnect"]
kind: "problem"
category: "correctness"
default: "off"
fixable: "no"
typeAware: false
deprecated: false
---

Google Fonts serves its font files from `fonts.gstatic.com`. A `<link>` to that host is there to open the connection early, so the font download doesn't wait for DNS and TLS. Without `rel="preconnect"`, the browser doesn't do that.

The rule looks at `<link>` elements with an `href` that starts with `https://fonts.gstatic.com`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"@next/next/google-font-preconnect" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
const hint = <link href="https://fonts.gstatic.com" />;
```

{/* bad */}
```jsx
const hint = <link rel="preload" href="https://fonts.gstatic.com" />;
```

Not reported:

{/* good */}
```jsx
const hint = <link rel="preconnect" href="https://fonts.gstatic.com" />;
```