Google Fonts

Load Google Fonts with proper performance, subsetting, and proven font pairings.

Security Scan

This is an instruction-only guide about loading and optimizing Google Fonts; its requirements and instructions are consistent with that purpose and it requests no credentials or installs.

Purpose & Capability

Name/description (Google Fonts performance, subsetting, pairings) matches the SKILL.md content. The skill requests no binaries, env vars, or installs — which is appropriate for a documentation-style helper.

Instruction Scope

SKILL.md contains only best-practice guidance (link tags, font-display, subsetting, pairings, self-hosting notes). It does not instruct the agent to read local files, access unrelated credentials, or transmit data to unexpected endpoints. It mentions third-party helper tools only as an optional recommendation.

Install Mechanism

No install spec and no code files — lowest-risk, instruction-only surface. Nothing is downloaded or written to disk by the skill itself.

Credentials

The skill declares no required environment variables, credentials, or config paths, which is proportionate to a documentation-style font guidance skill.

Persistence & Privilege

always:false and default invocation settings (agent may invoke autonomously) are appropriate. The skill does not request persistent presence or elevated privileges.

Assessment

This skill is a plain guide for using Google Fonts and appears coherent and low-risk. Things to consider before installing: (1) Google Fonts served from Google will contact Google servers and log IPs — if GDPR/privacy is a concern follow the SKILL.md advice to self-host (self-hosting requires you to fetch font files using a tool and host them on your CDN). (2) The skill is instruction-only, so it won't install code itself, but if an agent acts on its advice it might modify site HTML/CSS or download font files — review any actions before allowing them. (3) The skill mentions third-party helpers (e.g., google-webfonts-helper); vet those tools separately if you plan to use them. Otherwise this skill's content, scope, and requested access are proportionate to its stated purpose.

Loading Mistakes

• Missing display=swap causes invisible text until font loads—always add it to URL
• Load only weights you use: wght@400;600;700 not the entire family—each unused weight wastes ~20KB
• Missing preconnect slows load—add both: <link rel="preconnect" href="https://fonts.googleapis.com"> and <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Variable Fonts

• Inter, Roboto Flex, Montserrat, Open Sans have variable versions—one file for all weights
• Use wght@100..900 syntax for variable—downloads single file instead of multiple
• CSS for variable: font-weight: 450 works with any value in range
• Check "Variable" badge on font page—not all Google Fonts are variable

Subsetting

• Default includes latin—only add &subset=latin-ext if you need Polish, Vietnamese, etc.
• CJK fonts (Noto Sans JP, etc.) are huge—Google serves them sliced, but still heavy
• Unused subsets = wasted bytes—check what characters you actually need

Proven Pairings

Serif + Sans-Serif (classic contrast):

• Playfair Display (heading) + Source Sans Pro (body)
• Lora (heading) + Roboto (body)
• Libre Baskerville (heading) + Montserrat (body)
• Merriweather (heading) + Open Sans (body)

Sans-Serif only (modern/clean):

• Inter (both)—vary weight for hierarchy
• Montserrat (heading) + Hind (body)
• Poppins (heading) + Nunito (body)
• Work Sans (heading) + Open Sans (body)

Tech/Startup:

• Space Grotesk (heading) + Space Mono (code)
• DM Sans (heading) + DM Mono (code)
• IBM Plex Sans + IBM Plex Mono

Display fonts (headings only):

• Abril Fatface, Bebas Neue, Oswald—never use these for body text

Font Selection by Purpose

• Long-form reading: Merriweather, Lora, Source Serif Pro, Crimson Text
• UI/Interfaces: Inter, Roboto, Open Sans, Nunito Sans (tall x-height, clear at small sizes)
• Impact headings: Playfair Display, Oswald, Bebas Neue (not for body)
• Monospace: JetBrains Mono, Fira Code, Source Code Pro

Common Mistakes

• Loading 6+ weights "to be safe"—pick exactly the weights you use (usually 2-3)
• Using display fonts for paragraphs—Lobster, Pacifico, Abril Fatface are heading-only
• Two fonts too similar—Roboto + Open Sans look almost identical; just use one
• Missing font-weight in CSS—font-weight: 600 won't work if you only loaded 400 and 700
• No fallback stack—always: font-family: 'Inter', system-ui, sans-serif

Self-Hosting

• Self-host for GDPR compliance—Google Fonts loads from Google servers, logs IP addresses
• Use google-webfonts-helper to download files
• Same font-display: swap needed in your @font-face
• Self-hosted can be faster if your CDN is closer than Google's