boost/boostlook
2
0
Fork 0
mirror of https://github.com/boostorg/boostlook.git synced 2026-02-25 16:22:12 +00:00
Code Issues Projects Releases Wiki Activity

fix: use font-variation-settings for weight demos in style guide

Browse Source 
Restore font-variation-settings in @font-face and use explicit
wght axis values on style guide elements instead of font-weight.
This commit is contained in:
julioest
2026-02-23 22:55:18 -05:00
parent 66ce50147e
commit 79e8c06aed
3 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
boostlook-v3.css
View File

@@ -837,6 +837,7 @@ html:has(.boostlook) {
font-style: normal;
font-weight: 100 900;
font-stretch: 62.5% 100%;
font-variation-settings: "wght" 400, "wdth" 62.5;
font-display: block;
src: url("../font/NotoSansDisplay.ttf") format("truetype"),
url("/static/font/notosans.woff2") format("woff2"),
@@ -854,6 +855,7 @@ html:has(.boostlook) {
font-style: italic;
font-weight: 100 900;
font-stretch: 62.5% 100%;
font-variation-settings: "wght" 400, "wdth" 62.5;
font-display: block;
src: url("../font/NotoSansDisplay-Italic.ttf") format("truetype"),
url("/static/font/notosans_ext.woff2") format("woff2"),

10
preview/style-guide/index.html
View File

@@ -641,11 +641,11 @@
<div class="sect2">
<h3 id="_font_weights"><a class="anchor" href="#_font_weights"></a>Font Weight Variations</h3>
<div class="paragraph"><p style="font-weight: 300; font-size: var(--typography-font-size-md)">Light (300) &mdash; The quick brown fox jumps over the lazy dog.</p></div>
<div class="paragraph"><p style="font-weight: 400; font-size: var(--typography-font-size-md)">Regular (400) &mdash; The quick brown fox jumps over the lazy dog.</p></div>
<div class="paragraph"><p style="font-weight: 500; font-size: var(--typography-font-size-md)">Medium (500) &mdash; The quick brown fox jumps over the lazy dog.</p></div>
<div class="paragraph"><p style="font-weight: 600; font-size: var(--typography-font-size-md)">Semibold (600) &mdash; The quick brown fox jumps over the lazy dog.</p></div>
<div class="paragraph"><p style="font-weight: 700; font-size: var(--typography-font-size-md)">Bold (700) &mdash; The quick brown fox jumps over the lazy dog.</p></div>
<div class="paragraph"><p style="font-variation-settings: 'wght' 300, 'wdth' 62.5; font-size: var(--typography-font-size-md)">Light (300) &mdash; The quick brown fox jumps over the lazy dog.</p></div>
<div class="paragraph"><p style="font-variation-settings: 'wght' 400, 'wdth' 62.5; font-size: var(--typography-font-size-md)">Regular (400) &mdash; The quick brown fox jumps over the lazy dog.</p></div>
<div class="paragraph"><p style="font-variation-settings: 'wght' 500, 'wdth' 62.5; font-size: var(--typography-font-size-md)">Medium (500) &mdash; The quick brown fox jumps over the lazy dog.</p></div>
<div class="paragraph"><p style="font-variation-settings: 'wght' 600, 'wdth' 62.5; font-size: var(--typography-font-size-md)">Semibold (600) &mdash; The quick brown fox jumps over the lazy dog.</p></div>
<div class="paragraph"><p style="font-variation-settings: 'wght' 700, 'wdth' 62.5; font-size: var(--typography-font-size-md)">Bold (700) &mdash; The quick brown fox jumps over the lazy dog.</p></div>
</div>
</div>

2
src/css/03-fonts.css
View File

@@ -28,6 +28,7 @@ html:has(.boostlook) {
font-style: normal;
font-weight: 100 900;
font-stretch: 62.5% 100%;
font-variation-settings: "wght" 400, "wdth" 62.5;
font-display: block;
src: url("../font/NotoSansDisplay.ttf") format("truetype"),
url("/static/font/notosans.woff2") format("woff2"),
@@ -45,6 +46,7 @@ html:has(.boostlook) {
font-style: italic;
font-weight: 100 900;
font-stretch: 62.5% 100%;
font-variation-settings: "wght" 400, "wdth" 62.5;
font-display: block;
src: url("../font/NotoSansDisplay-Italic.ttf") format("truetype"),
url("/static/font/notosans_ext.woff2") format("woff2"),