Font Weight not applying on Front End

[omartan]

Hi,

Not sure why I’m facing this issue with components and font weight.

In the backend it looks like this

but on the front end (logged in)

Notice how the font weight is just off.

Can’t seem to figure it out and why

[christian]

Hey @omartan,

In your Font Manager, you only have Regular and Bold font weights. We’ll investigate all font weights are loaded in the builder but I believe it shouldn’t or should only display the actual font weights added in the Font Manager.

If you need all the font weights available, use Local Fonts or Google Fonts in your Component.

[omartan]

Hi, I tried using the Local Fonts or Google Fonts instead of the Font Manager and no difference.

If I add text element with Archivo and Lato directly loaded and hide it, it’ll allow the component to display it correctly

But it’s odd cause in the first image I shared, I have set on Components to be loading the file directly from Archivo and not font manager

Right now if I load the file directly from Google Font, then all is loaded as expected

[ruenel]

Hello Omar,

Could we temporarily remove these lines so we can troubleshoot?

<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=Archivo:ital,wght@0,100..900;1,100..900&family=Lato:ital,wght@0,300;1,300&display=swap" rel="stylesheet">

Thanks.

[omartan]

Hi @ruenel

Yes, feel free to temporarily comment or disable it.

[ruenel]

Hello Omar,

Here is my comparison:

The left side is using MS Edge loading the Cornerstone builder view while the right side is Brave browser displaying the live view of the page.

The font weight is the same on my end.

[omartan]

Hi @ruenel

You can check out this page instead.
https://x0eadh6t27.onrocket.site/what-is-an-eap/

[christian]

Hey @omartan,

You’re using the Extra Light (200) font weight. You need to set your Normal weight to that in the Font Manager.

[omartan]

Hi @christian but what if some header has the need for 300 or 400 font-weight?

[ruenel]

Hello Omar,

The font manager only loads what is being set. In the example given by @Christian, only 200 and 700 is loaded. This is why if you choose Normal 400, it will not reflect on the live view of the page. With your current font selection in the component, the solution will just have to be using the Google Font embed code:

<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=Archivo:ital,wght@0,100..900;1,100..900&family=Lato:ital,wght@0,300;1,300&display=swap" rel="stylesheet">

Thanks.

[omartan]

Got it now, thanks for the responses!

Quick question, is there any particular reason why we have to decide the normal and bold font-weight in the font manager? Cause they’re situations where a font may need 3 or 4 font-weights in a design. So we shouldn’t use font manager in those cases?

[ruenel]

Hello Omar,

The fewer font weights to load, the faster the resource is loaded. You can still use the font manager, but in your case, you may need to create multiple Archivo fonts with different font weights. For example;

Archivo - ULight  -> Loads 100 & 500
Archivo - Light   - > 200 & 600
Archivo - Book    -> 300 & 800
Archivo -Normal   -> 400 & 700  {your current font}
Archivo - Ultra   -> 400 & 900

And then in JSON, you match the font weights with the font name.

Hope this makes sense.