bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2260 from liberaldev/add-segoe-ui-variable

Browse Source 
Integrate Segoe UI Variable
This commit is contained in:
Andy Smith
2026-01-08 14:40:35 -06:00
committed by GitHub
parent c30b7982e5 cd9b382214
commit cf83f347c4
2 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+1 -1
View File
@@ -10,7 +10,7 @@
--block-space-double: calc(var(--block-space) * 2);
/* Text */
--font-sans: "Adwaita Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--font-sans: "Adwaita Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Fizzy", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--font-serif: ui-serif, serif;
--font-mono: ui-monospace, monospace;
app/assets/stylesheets/font-face.css
+41
View File
@@ -0,0 +1,41 @@
@layer base {
/*
Segoe UI Variable Fizzy font face configuration.
1. Segoe UI Variable (Weights 100-700):
Leverages variable font features to:
- Automatically adjust Weight (wght) dynamically within the 100-700 range.
- Automatically manage Optical Size (opsz) based on font-size.
2. Segoe UI Black (Weights 800-900):
Used as a fallback because Segoe UI Variable does not natively support 900 weight.
This ensures a consistent bold experience across all weights.
*/
@font-face {
font-family: "Segoe UI Variable Fizzy";
src: local("Segoe UI Variable");
font-weight: 100 700;
font-style: normal;
}
@font-face {
font-family: "Segoe UI Variable Fizzy";
src: local("Segoe UI Variable");
font-weight: 100 700;
font-style: italic;
}
@font-face {
font-family: "Segoe UI Variable Fizzy";
src: local("Segoe UI Black");
font-weight: 800 900;
font-style: normal;
}
@font-face {
font-family: "Segoe UI Variable Fizzy";
src: local("Segoe UI Black Italic");
font-weight: 800 900;
font-style: italic;
}
}