skills.rest
rangojs
rangojsOFFICIAL
Explore all skills by this author →
GitHub

fonts

Configure web fonts with preload hints in Rango Document components.

Updated Nov 7, 2025
Search Tags:#fonts#vite#tailwind#preload#web fonts#rango#fontsource
One-click install
npx skills add https://github.com/rangojs/rango --skill fonts-rangojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fonts
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/fonts
Command: npx skills add https://github.com/rangojs/rango --skill fonts-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding custom fonts to a Rango app often causes flash of unstyled text (FOUT), invisible text (FOIT), or slow external requests. This Skill shows how to load fonts correctly with preload hints so text renders fast and consistently. ## Core Features & Use Cases - Google Fonts Setup: Add preconnect hints and stylesheet links in the Document component for external font providers. - Self-Hosted Fonts: Define @font-face rules for woff2 files in public/fonts/ and preload the critical weight. - Fontsource with Vite: Install @fontsource-variable packages so fonts are bundled by Vite with content-hashed cache busting and no external requests. - Use Case: You are building a Rango app with Tailwind and want the Inter variable font bundled locally, wired into your @theme tokens, with no runtime CDN dependency. ## Quick Start Add the Inter variable font to my Rango app using Fontsource and wire it into my Tailwind theme.

Frequently Asked Questions about fonts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a custom font to a Rango app?▼

Add font loading in the Document component's head section. For Google Fonts, include preconnect links and the stylesheet link. For self-hosted fonts, define @font-face rules in your CSS and preload the critical woff2 file with a link tag.

What is the recommended way to load fonts with Vite?▼

Use @fontsource-variable npm packages, which Vite bundles as hashed assets with no external requests. Import the package CSS in your stylesheet and reference the font family in your CSS or Tailwind @theme tokens.

How do I use a custom font with Tailwind CSS?▼

Define the font in your Tailwind @theme block, for example --font-sans: "Inter Variable", sans-serif. Load the font first via Fontsource import or a stylesheet link in the Document, then Tailwind utilities like font-sans will use it.

Why do my fonts flash or swap on page load?▼

Font flash happens when the font file downloads after text renders. Fix it by preloading the critical font weight with link rel preload, using font-display: swap in @font-face rules, and preferring bundled Fontsource fonts over external CDN requests.

Should I use Google Fonts or self-hosted fonts?▼

Self-hosted fonts via @fontsource-variable are preferred with Vite because they avoid external network requests, work offline and on edge platforms like Cloudflare Workers, and get automatic cache busting. Google Fonts requires preconnect hints and adds runtime CDN dependency.

Related Skills

Explore More Software Engineering Skills→
JoseMas68JoseMas68

ck:template-skill

Bootstrap a new Skill unit with YAML frontmatter and an instruction section.

Community
Basic
teamniteoteamniteo
5

fonts

Configure web typography via the Astro Fonts API in astro.config.mjs and Tailwind CSS.

Official
Intermediate
PatternsDevPatternsDev
235

preload

Generate preload link hints for fonts, images, and scripts.

Official
Intermediate
stolinskistolinski
63

typography

Automate font pairing selection and type scale planning for web typography.

Community
Advanced