optimize-web-font-loading
Optimize web font loading for fast text, stable metrics, bounded files, and resilient fallback. Use when fonts delay rendering, shift layout, or fail across networks and scripts.
ソース情報
- リポジトリ
- protosphinx/sphinxstack
- ソースの最終更新活動
- 2026年7月29日 13:55
- 検出された SKILL.md の言語
- 英語
- スター
- 3
- フォーク
- 0
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
ファイルエクスプローラー
2 ファイルSKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- optimize-web-font-loading
- category
- web
- description
- Optimize web font loading for fast text, stable metrics, bounded files, and resilient fallback. Use when fonts delay rendering, shift layout, or fail across networks and scripts.
# optimize-web-font-loading
Deliver only the faces needed and make fallback acceptable at every moment.
## Procedure
1. Inventory families, weights, styles, scripts, pages, licenses, and actual use.
2. Remove unused faces and subset only with verified language coverage.
3. Prefer modern compressed formats and same-origin delivery where practical.
4. Define preload only for critical above-fold faces and correct cross-origin behavior.
5. Choose `font-display` from the content and brand tradeoff.
6. Match fallback metrics to reduce reflow and preserve readable text.
7. Set immutable cache URLs, correct MIME, CORS, and versioning.
8. Test cold, warm, slow, offline, blocked-font, localization, and zoom cases.
9. Measure text render, layout shift, transfer, and cache reuse before and after.
## Guardrails
- Do not subset away required languages or symbols.
- Preloading every font competes with more critical resources.
- Licensing terms remain part of deployment readiness.
## Done
- A font inventory and delivery report records every retained face
- Fallback, localization, failure, and cache cases are tested
- Render timing and layout stability improvements are verified
GitHubで見る