NO BUG: Font weight issue on macs

Building a site (https://altechradio.northonyx.com/) and font weights are not working on macs. Anywhere that I have set the weight to 700 or 900, it’s just displaying at 400. The font is Arial, and it’s just using the Standard Font from the drop-down in Theme settings. I usually upload custom fonts in Bricks settings, but I though Arial worked by default. How do I fix this?

Also, macs are having a spacing problem with the header where the logo is too far to the left. It should be left aligned within the container but it isn’t.

Both issues are happening on Safari and Chrome on macs. No problems on Windows.

Hi Austin,
Thanks for your report!

I can’t confirm that on two Macs. All good on my end.

But I noticed you’re using font-weights such as 900, which are often unavailable for the default fonts such as Arial (even if they are showing in the dropdown). The “safe” weights are always 400 and 700, which mean normal/regular and bold. For most default fonts, there’s nothing in between, below or above.

For example, looking at Apple’s font book, I can see two weights and two styles for Arial:

Regular / Italic / Bold / Bold italic

So, if entirely different font weights show up, it’s most likely because you’ve chosen a non-existing weight, and the browser/system decides which font-weight gets used instead, which is not a Bricks bug/issue. You can test this on Codepen with simple HTML/CSS and will most likely get the same result.

Best,
timmse

Thanks for confirming it’s not a Bricks issue. Some follow up questions

  1. On Windows machines, I can get Arial Black (900 weight) to show up. Is this a limitation on Apple machines? If so why.
  2. Is there a way I can set the preferred weight to be 900, but use 700 if it’s not available? Or use 700 on Mac’s?
  3. Is there a tool I can use to see what things looks like on Safari while using my windows laptop?

Maybe a “black/900” weight is installed on your Windows machine, or the browser “emulates” the weight (such as it does if there’s no “italic” version, but you’re using italic).

No, not that I’m aware of.

Some well-known tools are:

To summarise again: If you use a system font such as Arial, you should stick to the ‘standard’ font weights, which are 400 and 700. If you want to use other weights, you must install the font as a custom font (which makes no sense because you want to use system standards).

1 Like