"Source Sans Pro" font-weight: 400 displays bolder than 600 on Chrome, Safari and Firefox

2
votes

It seems the font weight: 400 is bolder than 600. Does this happen only to me? On my Mac Book Pro, it displays the same on Chrome, Safari and Firefox. So, I guess it is not a browser related issue.

https://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro

What is the best solution for this? Using font weight:600 rather than 400 for a normal font weight? I don't know how to report the issue to Google.

3
csswebfontsgoogle-font-api
might help! stack - yjs
Thank you yjs. For this issue, both webkit (Chrome/Safari) and moziila (Firefox) display the same issue. So, the cross browser font rendering is not the case. But I appreciate it. - shinyatk
It's likely this is an issue with your code, not the font itself. Have a look at this fiddle; on my machine, on all three browsers you mentioned the font-weight displays properly. - justinw
Thank you Quoid! You're right. For some reason, the browsers on my laptop display the font weight incorrectly even on your fiddle link. But I can see them properly when I looked at it on an online cross browser platform. I appreciate it. - shinyatk
@shinyatk glad to help, i've put an answer up so you can marked this as resolved - justinw

3 Answers

1
votes

As mentioned in the comments, this is likely an issue with your machine (happens to the best of us).

Take a look at this fiddle on a different machine (I've personally verified font-weight changes on multiple browsers); you will see the differences.

1
votes

Now I figured out why this happened. As @Quiod gave me a tip that the issue was on my machine not google's fault (of course). The reason was I "Synced fonts" with "Source Sans Pro Bold" on Adobe Typekit. When I unsynced it, the font displays properly. If the same things happen on the other fonts, you might need to uninstall your local fonts. Then the problem goes away. Thanks!

0
votes

Adobe has a font with the same "Source Sans Pro" name which confuses most browsers except for Internet Explorer. You can just delete it from the Control Panel/Fonts folder, no reboot necessary.