cssfontsgoogle-fontsroboto

Font appear to be stronger on dark background

I'm trying to get around a irritating issue with fonts. Specific Googles Roboto font.

The thing is that the font appear to be stronger (fat) on dark backgrounds in my tests (Chrome 62.0.3202.62 on OSX Sierra 10.12.6) while it play nice on googles dark font edition (https://fonts.google.com/specimen/Roboto?selection.family=Roboto:300,500,700 - Choose dark background).

Screenshot of my appearing:

enter image description here

vs Google appearing (its the light)

enter image description here

I started to belive there was something wrong with my rendering, but after trying this on several machines with different setup, its all the same.

Do anyone have any idea of how to fix this? Or an explanation of why its different between Google and my test.

Url for testing: https://jsfiddle.net/fb3umv2e/

.btn {
   display: inline-block;
   padding: 7px 8px;
   text-align: center;
   background: #fff;
   color: #000;
   font-family: "Roboto";
   font-weight: 300;
   text-decoration: none;
   font-size: 20px;
 }
 .btn.inverted {
   background: #222;
   color: #fff;
 }

Best regards Richard

Solution

  • Try adding these to your button styling :)

    -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;