K-D-C/KDCDesignSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fonts): wire fonts.css to actual Manrope + Opificio binaries
Lint / lint (push) Has been cancelled
Details

Browse Source 
- Add @font-face for every Manrope weight 200-800 (incl. new Light/300)
- Map Opificio cuts to lowercase filenames as installed:
  * opificio_light/regular/bold.woff2 -> family "Opificio" (300/400/700)
  * opificio_light_rounded/rounded/bold_rounded.woff2 -> family "Opificio Rounded"
- Restore Opificio README with the actual file -> CSS-weight mapping
- Update Manrope README to list the installed weights

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Roberts
2026-04-29 19:52:32 +00:00
parent af2af23d14
commit 0edb7c627d
20 changed files with 106 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/fonts/fonts.css
+80 -17
View File
@@ -1,41 +1,104 @@
/* Kode Design Consultants — font-face declarations.
Self-host these files from /assets/fonts/. */
/* Manrope — primary UI typeface (variable, 200–800). */
/* ===== Manrope — primary UI typeface (200–800) ===== */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 200 800;
font-weight: 200;
font-display: swap;
src: url("./Manrope/Manrope-Variable.woff2") format("woff2-variations"),
url("./Manrope/Manrope-Regular.woff2") format("woff2");
src: url("./Manrope/Manrope-ExtraLight.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("./Manrope/Manrope-Light.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./Manrope/Manrope-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("./Manrope/Manrope-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("./Manrope/Manrope-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("./Manrope/Manrope-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("./Manrope/Manrope-ExtraBold.woff2") format("woff2");
}
/* Opificio — display / wordmark only.
Three cuts: Bold (canonical), Rounded, Regular. */
/* ===== Opificio — display / wordmark only =====
Family "Opificio" → squared cuts (Light 300, Regular 400, Bold 700)
Family "Opificio Rounded" → rounded cuts (Light 300, Regular 400, Bold 700) */
@font-face {
font-family: "Opificio";
font-style: normal;
font-weight: 700;
font-weight: 300;
font-display: swap;
src: url("./Opificio/Opificio-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Opificio Rounded";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("./Opificio/Opificio-Rounded.woff2") format("woff2");
src: url("./Opificio/opificio_light.woff2") format("woff2");
}
@font-face {
font-family: "Opificio";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./Opificio/Opificio-Regular.woff2") format("woff2");
src: url("./Opificio/opificio_regular.woff2") format("woff2");
}
@font-face {
font-family: "Opificio";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("./Opificio/opificio_bold.woff2") format("woff2");
}
@font-face {
font-family: "Opificio Rounded";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("./Opificio/opificio_light_rounded.woff2") format("woff2");
}
@font-face {
font-family: "Opificio Rounded";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./Opificio/opificio_rounded.woff2") format("woff2");
}
@font-face {
font-family: "Opificio Rounded";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("./Opificio/opificio_bold_rounded.woff2") format("woff2");
}
/* Roboto Mono — code / tabular figures only. Not a brand typeface. */
/* ===== Roboto Mono — code / tabular figures only (not a brand typeface) ===== */
@font-face {
font-family: "Roboto Mono";
font-style: normal;