WIP: Variable font issue

acaso · October 21, 2024, 7:07pm

I tried to use for a project the Google font variable Bricolage Grotesque - Google Fonts

First I tried to include the font from the pre-populated Google fonts list. Setting the axis parameters in the font-variation-settings field (for example “wdth” 75) doesn’t work.

I then proceeded to include the font manually by including the css in the header

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet">

Finally, I inserted a global CSS rule to assign the font to everything

*{
font-family: "Bricolage Grotesque";
font-optical-sizing: auto;
}

Now setting up the axis parameters in the font-variation-settings field (for example “wdth” 75) works.

But, there is a but!

I think what I described is really tricky and I don’t understand why variable fonts aren’t supported better within the builder. Am I doing something wrong?

Second thing, really frustrating
Css rules setted up in global css (or either in style.css of child theme) have no effect in the builder, so I see default font family inside it. Not good! Any solution for it?

Thanks.

timmse · October 22, 2024, 6:47am

Hi Antonio,
Thanks so much for your report!

Overall, the font and its font-variation settings work fine on my end. The only issue I see is that changing the font variation settings requires a builder reload if there is more than one setting (e.g. "wght" 222, "wdth" 100), which needs some improvement. I just created an internal task to tackle this issue.

https://try.bricksbuilder.io/ted545f0/variable-font-bricolage-grotesque/

I can’t see any issue. The child theme style.css styles, in my case, the red background color, show as expected within the builder. The same applies to styles within Bricks » Settings » Custom Code » Custom CSS.

Best regards,
timmse

Variable font

Child theme styles

Lydia · October 22, 2024, 11:14am

According to this page, Integration: Adobe Fonts – Bricks Academy - it should be really easy to change the width of a variable font. It is mainly about Adobe fonts, but ‘This new font-variation-settings is also available for custom fonts’ - last sentence of the doc.

But it didn’t work.

Select variable font - see the image in the doc: it says Source Code Variable. In this case: Outfit
Add: ‘wdth’ 90

But nothing changes.

When I add ‘wght’ 700 - the text does change.

What goes wrong?

(The first text block has a width indicated, the second not. Both are the same.)

acaso · October 22, 2024, 11:49am

Thank you very much for your time.
I did some other tests and maybe I understood where the problem lies.
The embedding of the font from Google.

Only wght variations are imported.

Solved importing in my child.css (or wherever you want) all variations with all range of values.

@import url(‘https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&display=swap’);

This also solves the update problem in the canvas, you can delete the task

timmse · October 22, 2024, 3:01pm

Ok, cool @acaso

No I can’t, since the issue isn’t yet fixed for everybody

timmse · October 22, 2024, 3:05pm

@Lydia

It is, if the font supports the width axis. When I look at the available axes of your font (Outfit), I only see weight - not width - and accordingly, it does not work

Lydia · October 23, 2024, 7:12am

It worked! I have checked the Google Font library for a variable font that supports the width axis, and it is then super easy to adjust the font natively in Bricks.

The image shows 3 widhts: normal, 150 and the maximum of 200.

I didn’t know of this handy trick, so thanks Timmse for your support and to Acaso to raise the topic!

It gives exciting new possibilities for styling.