nextjs-font-css-variable-collision
next/font CSS Variable Name Collision
Problem
When next/font configuration uses the same CSS custom property names as your
design system (e.g., both define --font-display), the CSS cascade determines
which value wins based on source order in the compiled CSS bundle. This creates
a latent bug that can appear or disappear when unrelated changes (like adding
new font imports) cause webpack to reorder CSS chunks.
The result: @font-face registers fonts under hashed internal names (e.g.,
'__Instrument_Serif_315a98'), but the CSS variable resolves to the literal
name ('Instrument Serif') which has no matching @font-face rule. The browser
falls back to the next font in the stack (e.g., Georgia).
Context / Trigger Conditions
More from hubeiqiao/skills
apple-bento-grid
|
2pptx
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks
1responsive-video-source-selection
|
1coding-standards
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
1docx
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks
1internal-comms
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).
1