It’s important to place these properties after the font-variation-settings property, otherwise they’ll be overriden by font-variation-settings.
The other properties font-weight and font-style list the range of supported weights and styles for the font. While SegoeUIVF-all.ttf is loaded for every font family, it uses a different axis of variation depending on the name. The font-variation-settings property is the key here and lets you specify the optical size of the variable font. You might see a CSS rule like this: body
Many sites use the system font when rendering sans-serif text, since it’s quick to load (already installed in your device) and looks like other apps on your device. This new font is a variable font that replaces the older Segoe UI font in Windows 10 and below. DirectWrite thinks this is a lighter-weight font in the segoe ui family. Windows 11 introduced a new system font called Segoe UI Variable. Your problem is that Windows has two different font subsystems: GDI and DirectWrite.
