Faux bold & italic in the Cloudron dashboard and how to quick fix

[dev-cb]

Hi,

I was just noticing that the notification titles in the Cloudron dashboard looked awfully odd. When looking at the theme.scss to check what’s off, I was noticing the following:

The font-weight is set to bold (theme.scss#L1648)

Digging deeper I was noticing, that there were only two @font-face rules defined in (theme.scss#L58-66)

• only two font files are loaded: Light and Regular
• no font-style descriptor, so default font-style: normal would be applied
• no font-weight descriptor, so default font-weight: normal would be applied

Since there are only two font files loaded (Light, Regular) there is no file for the bold/700 weight – unless you’ve installed the font locally on your device.

This will cause the browser to faux bold the notification title. That’s basically just an outline to make the font appear bolder but that leads to crappy results. (more about that phenomenon here)
BTW, the same applies to font-style: If there is no italic font file loaded the browser will slant the font which results in faux italics. (more here)

Here is a comparison of faux (left) and correct (right):

The fix is easy: Load the entire Roboto font family, incl. all italic styles.

[nebulon]

Great catch, we will include the proper font!

[nebulon]

Fixed for next release with https://git.cloudron.io/cloudron/box/-/commit/8e4506382d77e1a167096012c5aebb4ad7cc8f79