Variable font weight

[xoa]

Hi there, is it possible to use a variable font weight for google fonts that support that?

For example - Source Sans 3 has a font weight adjustable from 200-900 without being tied to 100 steps.

Thanks!

[ruenel]

Hello @xoa,

Thanks for posting in!

I am not sure if we are on the same page. When you set up a Google Font using the Font Manager, you have this:

The Google font name, normal and bold weights are set. If you have a Headline or Text element, you can assign the Font just like this:

If you want to use 200 or 900, you can also select the exact weights in the dropdown.

When you save the page and view the live, Cornerstone will automatically load that font weight.

Hope this helps.

[xoa]

@ruenel

Sorry, maybe I was not clear enough. I mean like setting a font weight of ex. 250 or 430.

[ruenel]

Hey @xoa,

To clarify, the standard font-weight dropdown in the Font Manager and element settings is designed for traditional fonts where each weight is a separate file. It does not currently support the continuous weight axis (e.g., 200 to 900) that variable fonts like Source Sans 3 offer.

To control the weight of a variable font, you need to use the font-variation-settings CSS property directly. You also need the font URL, for example: https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap

And then use the custom CSS in the Global CSS:

// <weight>: Use a value from 200 to 900
// <uniquifier>: Use a unique and descriptive class name

.source-sans-3-<uniquifier> {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

(The code above is taken from the Google Fonts selection embed code page)

I will be adding a feature request for the Font Manager to support the Font Variation Settings.

Best Regards.