diff --git a/boostlook-v3.css b/boostlook-v3.css
index f1b2dca..5dce405 100644
--- a/boostlook-v3.css
+++ b/boostlook-v3.css
@@ -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"),
diff --git a/preview/style-guide/index.html b/preview/style-guide/index.html
index 6301e29..701a228 100644
--- a/preview/style-guide/index.html
+++ b/preview/style-guide/index.html
@@ -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>
diff --git a/src/css/03-fonts.css b/src/css/03-fonts.css
index 63c9d65..a10dc79 100644
--- a/src/css/03-fonts.css
+++ b/src/css/03-fonts.css
@@ -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"),