R17.5: Next/Font optimization

Short answer: Load Google/local fonts via next/font with zero layout shift. A font loaded by link shifts the text when it arrives.

Group: React and Next.js patterns. Status: stable. Generated from the rule definitions; do not edit by hand.

Playground: https://brevio.pro/tools/agent-guard-playground?rule=R17.5

What it catches

Next/Font optimization: load Google/local fonts via next/font with zero layout shift.

Why

A font loaded by link shifts the text when it arrives.

A bad example

<link href="//fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

A good example

const inter = Inter({ subsets: ['latin'] });  // next/font

How it is checked

Nothing yet. No scanner and no slice card checks it: it is a standing rule for authors and reviewers.

How to silence it

A person can silence one finding with brevio-core: ignore R17.5 -- reason on the line or the line above. Without the reason it does not count. An agent cannot silence it: the agent hook and the MCP tools never honour the comment, and a pull request that adds one is reported until a reviewer allows it. Fixing the code is still the better answer.

To change what the rule flags, edit its definition in dev_rules.py or code_rules/__init__.py. That is a code change and is reviewed like one.

R17.6 Client boundary minimization
R17.7 Server action security
R17.8 Route handler return typing
R17.1 Server Component default
Every rule