🐛 Rules heading style different in Chrome and Safari

[jeoffreyfischer]

@bettybondoc @jaydenalchin @tiagov8

Describe the Bug

On SSW Rules, the heading style is different in Chrome and Safari:

• In Chrome, the heading text is normal
• In Safari, the heading text is bold / semi-bold

To Reproduce

Steps to reproduce the behavior:

1. In Chrome, go to a rule, e.g. https://www.ssw.com.au/rules/event-storming-workshop/
2. In Sarfari, go to the same rule https://www.ssw.com.au/rules/event-storming-workshop/
3. Observe the different in heading styles

Expected Behavior

The heading should have the same style regardless of the machine OS. That style should be the one on Safari i.e. with bold / semi-bold headings

Tasks

• [x] Investigate why styles are different on different browsers
• [x] Fix

Screenshots

Figure: Rule on a Windows

Figure: Rule on a Mac

Thanks!

[tiagov8]

Hi,

FYI - the rendering issue is not on OS , but the browser. On my Mac it looks thinner on Chrome and Bolder on Safari (same OS)

Looking at the CSS there are no problems 🤨 .. seems like Safari just renders font-weight: 500 used on headings differently (bolder).

PS. On Edge for Mac the font looks thinner too, like Chrome.

Unfortunately I couldn't find any solution yet ...

--

That style should be the one on Mac i.e. with bold / semi-bold headings

⚠️ Important: Please follow @jaydenalchin instructions before making any styling changes. The font-weight should follow his guide.

--

Screenshots on Tiago's Mac

Safari:

---

Chrome:

Edge:

---

[jeoffreyfischer]

Thanks @tiagov8 , I will get @bettybondoc and @jaydenalchin to confirm that they're happy with the style on each browser 👍

[bettybondoc]

cc @tiagov8 @jeoffreyfischer @jaydenalchin

I'm also confused about this issue.

On my Mac, they're okay (bold) on both Chrome and Safari

Figure: Chrome

Figure: Safari

[tiagov8]

Hey @bettybondoc

Can you confirm you have Open Sans installed in your machine? If not, can you install and do the test again

All,

I am pretty sure the examples we see bolder are Helvetica... while the thinner ones are Open Sans.

The easiest way to spot the difference is on the question mark dot:

• 🟥 Square on Helvetica
• 🔴 Rounded on Open Sans

I believe our website is not "calling" the Open Sans font from web, so it shows only for the users who have it installed.

More info: https://www.w3schools.com/css/css3_fonts.asp

That is what we need to fix :)

Figure: Toggle between fonts clearly shows the issue

Figure: The CSS set for the website... Open Sans first, then Helvetica

[jeoffreyfischer]

✅ Done - this PBI was fixed in #1399

[bettybondoc]

@tiagov8 cc @jeoffreyfischer @jaydenalchin

Can you confirm you have Open Sans installed in your machine? If not, can you install and do the test again

Yeah, you're right! When I installed Open Sans, it behaves the same way with yours now (bold in Safari, normal in Chrome) 😬 But I think this will be fixed once @jeoffreyfischer merges his changes re Issue https://github.com/SSWConsulting/SSW.Rules/issues/1399

Figure: Chrome

[jeoffreyfischer]

✅ Done - this PBI was fixed in #1399