Claude Code से Web Font Optimization: व्यावहारिक गाइड

Font optimization सिर्फ design नहीं, rendering stability है

Web font साइट की पहचान मजबूत करता है, लेकिन गलत loading strategy से वही font performance problem बन जाता है। Text देर से दिख सकता है, heading बाद में चौड़ी हो सकती है, CTA button हिल सकता है, और LCP खराब हो सकता है। LCP यानी Largest Contentful Paint, first viewport में सबसे बड़े content element के render होने का समय। CLS यानी Cumulative Layout Shift, loading के दौरान layout का अनचाहा खिसकना।

Japanese, Chinese, Korean जैसे बड़े character set वाले fonts में risk और ज्यादा होता है। एक font file पूरे critical CSS से भारी हो सकती है। इसलिए Claude Code को सिर्फ “font optimize करो” कहना काफी नहीं है। उसे बताना होगा कि कौन सा text critical है, कौन सा text system font से भी readable रह सकता है, कब preload लगाना है, कब preconnect लगाना है, font-display कौन सा रखना है, और result कैसे verify करना है।

इस guide में Astro site के example से practical workflow दिया गया है। Official behavior के लिए MDN काfont-display औरrel="preload" reference देखें। Broader strategy के लिए web.dev कीfont best practices, optimize web fonts, औरWeb Vitals useful हैं।

पहले loading strategy तय करें

Claude Code fast edits कर सकता है, इसलिए vague prompt risky है। अगर आप कहेंगे “fonts तेज करो”, तो वह हर weight को preload कर सकता है, Google Fonts CSS और self-host CSS दोनों छोड़ सकता है, या fallback layout बिगाड़ सकता है। पहले यह decide करें कि first viewport में कौन सा font सच में जरूरी है।

Use case	Strategy	Benefit	Common failure
Multilingual blog	Body में system font, headings में subset web font	Font late हो तो भी article readable रहता है	Decorative font पूरे body पर लग जाता है
SaaS dashboard	Latin variable font self-host	Multiple weights एक file से cover	Unused italic, axes और languages बची रहती हैं
Landing page hero	LCP heading वाला WOFF2 ही preload	Main sales message जल्दी दिखता है	सभी weights hero image से bandwidth छीनते हैं
Old icon font	SVG या icon component में migrate	Font request हटती है	Pseudo-element CSS टूट जाता है

Content site में boring solution अक्सर best होता है: body को system font से readable रखो और brand font को heading या navigation तक सीमित करो। Product UI में buttons, tables और numbers ज्यादा होते हैं, इसलिए Inter जैसी variable font अच्छी हो सकती है। Landing page में font और hero image साथ में LCP budget share करते हैं, इसलिएClaude Code image optimization भी पढ़ें। Full performance work के लिएClaude Code performance optimization उपयोगी है।

Astro में preload और preconnect

preload strong hint है। इसे सिर्फ उन WOFF2 files पर लगाएं जो first viewport में निश्चित रूप से use हों। सभी weights, सभी languages, या scroll के बाद दिखने वाले fonts preload न करें। Self-hosted fonts same origin से आते हैं, इसलिए सामान्यतः preconnect की जरूरत नहीं। Google Fonts जैसे third-party provider में CSS origin और font origin के लिए preconnect useful हो सकता है।

---
// src/layouts/BaseLayout.astro
const criticalFonts = [
  { href: "/fonts/inter-var-latin.woff2", type: "font/woff2" },
  { href: "/fonts/noto-sans-jp-latin-kana.woff2", type: "font/woff2" },
];

const usesGoogleFonts = false;
---

<html lang="hi">
  <head>
    {criticalFonts.map((font) => (
      <link rel="preload" href={font.href} as="font" type={font.type} crossorigin />
    ))}

    {usesGoogleFonts && <link rel="preconnect" href="https://fonts.googleapis.com" />}
    {usesGoogleFonts && <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />}

    <link rel="stylesheet" href="/styles/fonts.css" />
  </head>
  <body>
    <slot />
  </body>
</html>

Implementation के बाद generated HTML देखें। href वही होना चाहिए जो @font-face के src में है। as="font", type="font/woff2" और crossorigin missing नहीं होने चाहिए। अगर Chrome warning देता है कि preloaded resource use नहीं हुआ, तो preload हटाएं।

font-display और fallback metrics साथ में रखें

font-display: swap पहले fallback font से text दिखाता है, फिर web font आने पर बदलता है। इससे invisible text कम होता है, लेकिन fallback और final font की width या height अलग हो तो CLS आ सकता है। Non-critical body text के लिए slow network पर optional better हो सकता है, क्योंकि browser fallback font ही रख सकता है।

/* public/styles/fonts.css */
@font-face {
  font-family: "InterVariable";
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NotoSansJPSubset";
  src: url("/fonts/noto-sans-jp-latin-kana.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+3000-30FF, U+FF00-FFEF;
}

@font-face {
  font-family: "InterFallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --font-ui: "InterVariable", "InterFallback", system-ui, sans-serif;
  --font-ja: "NotoSansJPSubset", "Hiragino Sans", "Yu Gothic", sans-serif;
}

body {
  font-family: var(--font-ui);
}

article {
  font-family: var(--font-ja);
}

MDN काunicode-range बताता है कि एक font face किन characters पर लागू होगी। इससे file अपने आप छोटी नहीं होती। Bytes कम करने के लिए छोटा WOFF2 बनाना पड़ेगा।

Variable fonts और subsetting से bytes घटाएं

Variable font कई weights को एक file में रख सकती है। यह dashboard और UI में useful है, लेकिन हमेशा छोटी नहीं होती। अगर उसमें कई axes, italic और बड़ी language coverage है, तो वह भारी रह सकती है। Claude Code से पहले actual weights, CSS usage और font families audit कराएं।

Subsetting का मतलब है font file से सिर्फ जरूरी characters रखना। Navigation, hero heading, fixed CTA और labels के लिए यह बहुत useful है। Article body में risk है, क्योंकि नई post नए characters ला सकती है।

# Create a WOFF2 subset with Latin, punctuation, kana, and full-width forms.
python -m pip install "fonttools[woff]"
mkdir -p public/fonts

pyftsubset ./vendor-fonts/NotoSansJP-Regular.ttf \
  --output-file=./public/fonts/noto-sans-jp-latin-kana.woff2 \
  --flavor=woff2 \
  --layout-features='*' \
  --unicodes="U+0000-00FF,U+3000-30FF,U+FF00-FFEF"

यह command ज्यादातर kanji include नहीं करती। यह heading, menu या fixed text के लिए ठीक है, लेकिन full Japanese body के लिए काफी नहीं। Body coverage चाहिए तो MDX files से actual characters निकालकर --text-file use करें या अलग kanji subset बनाएं। Font license भी check करें, क्योंकि self-hosting और modification हर font में allowed नहीं होती।

Self-host या third-party

Self-host में files आपके domain से serve होती हैं। URL, cache, fingerprint, preload target और subset पर पूरा control मिलता है। बदले में license, updates और build script maintain करने पड़ते हैं। Third-party provider जल्दी setup होता है, लेकिन external DNS/TLS, CSS request और provider dependency जोड़ता है।

Criteria	Self-host	Third-party
Connection	Same origin	External CSS और font origin
Cache	आप control करते हैं	Provider control करता है
Preload	Exact WOFF2 target	URL CSS से decide हो सकती है
Subset	Flexible	Service पर निर्भर
Operations	ज्यादा जिम्मेदारी	आसान start, ज्यादा dependency

Performance-sensitive pages में critical first-view fonts self-host करना practical रहता है। Decorative fonts को delay करें। Third-party use करते समय सिर्फ used weights load करें, display=swap लगाएं और migration के बाद duplicate CSS हटाएं।

Lighthouse और WebPageTest style verification

Implementation के बाद सिर्फ visual review काफी नहीं। Lighthouse से LCP, CLS और font-display warnings देखें। फिर WebPageTest की तरह waterfall देखें: HTML, CSS, critical font, hero image, JavaScript। Critical font जल्दी शुरू हो, लेकिन CSS या LCP image को block न करे।

URL="https://example.com/"
npx --yes lighthouse "$URL" \
  --only-categories=performance \
  --chrome-flags="--headless" \
  --output=json \
  --output-path=./lighthouse-fonts.json

node -e "const r=require('./lighthouse-fonts.json'); for (const id of ['largest-contentful-paint','cumulative-layout-shift','font-display']) console.log(id, r.audits[id]?.displayValue ?? r.audits[id]?.score ?? 'n/a')"

Checklist: one or two critical WOFF2 files ही early start करें; unused preload warning न हो; repeat visit में cache काम करे; font swap पर heading और CTA न हिलें; Google Fonts CSS self-host migration के बाद बचा न हो; same WOFF2 दो बार download न हो।

Concrete pitfalls: first viewport regular use करता है लेकिन bold preload होता है; subset में punctuation या full-width digits गायब हैं; font-display: swap है पर fallback metrics mismatch है; icon font अभी भी preload हो रही है; license check किए बिना font modify कर दी गई।

Claude Code prompts

पहले read-only audit कराएं।

Audit web font loading in this Astro site. Do not edit files yet.

Find:
- @font-face, Google Fonts, Fontsource, and CSS import locations
- Font files used above the fold
- preload and preconnect hints that are missing or unnecessary
- CLS or LCP risks caused by font swapping
- Candidates for self-hosting, variable fonts, and subsetting

Return:
- A prioritized table of changes
- Files that should be edited and files that must not be touched
- Verification commands and residual risks

फिर implementation scope छोटा रखें।

Implement web font optimization only in these files:
- src/layouts/BaseLayout.astro
- public/styles/fonts.css
- generated files under public/fonts/

Acceptance criteria:
- Preload only WOFF2 files used in the first viewport
- Do not add preconnect when fonts are self-hosted
- Every @font-face has a deliberate font-display value
- Fallback metrics are adjusted to reduce CLS
- Existing routes, article slugs, hero images, and unrelated content are untouched

Verification:
- npm run build
- node scripts/check-code-fences.mjs
- Lighthouse check for LCP, CLS, and font-display
- Report what could not be verified

Practical result और CTA

Masa के workflow में generic prompt की जगह specific prompt बेहतर रहा। “LCP heading वाली font ही preload करें, body को system font से readable रखें, और CLS risk report करें” से diff छोटा और reviewable रहा। Japanese article page पर Latin और kana subset से first viewport stable हुआ, लेकिन full body coverage के लिए character extraction चाहिए था। सबसे useful verification slow mobile waterfall और manual check था कि heading और CTA font swap पर हिलते नहीं।

Team workflow में ये rules CLAUDE.md में लिखें। Safe commands के लिएfree cheat sheet से शुरू करें, reusable prompts के लिएproduct templates देखें, और Core Web Vitals, article quality और monetization CTA को साथ सुधारना हो तोClaude Code training उपयोगी है।

Publication self-check: इस article में 3 से ज्यादा use cases, Astro/CSS/bash examples, official MDN और web.dev links, internal links, concrete pitfalls, natural CTA और hands-on verification note शामिल हैं।

Claude Code से Web Font Optimization: व्यावहारिक गाइड

Font optimization सिर्फ design नहीं, rendering stability है

पहले loading strategy तय करें

Astro में preload और preconnect

font-display और fallback metrics साथ में रखें

Variable fonts और subsetting से bytes घटाएं

Self-host या third-party

Lighthouse और WebPageTest style verification

Claude Code prompts

Practical result और CTA

मुफ़्त PDF: Claude Code cheatsheet

संबंधित लेख

Claude Code Permission Receipt Pattern: scope, proof और rollback लिखना

Claude Code और Codex के लिए सुरक्षित Agent Harness: permissions, verification और rollback

Claude Code Subagents गाइड: article और code work को सुरक्षित तरीके से delegate करें