Page 1 of 1

Variable font support

Posted: Mon Nov 14, 2022 12:40 pm
by dorian_topsolid
Hello,
I'm currently trying and failing to use a variable font with Oxygen Chemistry. Is this feature supported?

Here's my code:

Code: Select all

@font-face {
  font-family: "OpenSans-Variable";
  src: url('resources/fonts/OpenSans-VariableFont_wdth,wght.ttf') format("truetype");
}

*[class ~= "uicontrol"], *[class ~= "keyword"] {
  font-family: "OpenSans-Variable" !important;   
  font-size: inherit;
  white-space: nowrap;
  font-weight: 650 !important;
}
I tried to use in-between values, as well as "regular" values of Open Sans (400, 500...) but neither is working.

Previously, I referenced the individual .ttf file for Bold, but I wanted to have a font-weight between Bold and Semi-Bold (650). Is this possible?

Kind regards,
Dorian

Re: Variable font support

Posted: Tue Nov 15, 2022 12:17 pm
by andrei_pomacu
Hi Dorian,

Variables fonts are a feature implemented in CSS Fonts Level 4 (More about variable fonts are found here https://developer.mozilla.org/en-US/doc ... able_fonts) which Chemistry does not support yet.
font-weight also needs to have one of this values: 100, 200, 300, 400, 500, 600, 700, 800, and 900 in order to work correctly.
Since we do not support variable fonts, the font that you want to use has to be static as well. So, in order to use a basic font-weight value it is mandatory to look into static folder.

Your URL should look something like:

Code: Select all

src: url('resources/fonts/static/OpenSans/OpenSans-Regular.ttf') format("truetype");
Regards,
Andrei