0

I am using the roboto font family with font weight bold. This looks good on iOS and desktop browsers. On Android somehow the font is way to bold:

Android chrome

Changing the font to arial looks much better:

enter image description here

On other devices however (iOS, mac chrome) it looks OK in roboto:

enter image description here

Android is somehow using its own stylsheed with font weight 700:

enter image description here

How can I use robot bold on android without this huge type face?

merlin
  • 2,717
  • 3
  • 29
  • 59
  • Probably a dumb suggestion, but would adding `font:weight: 300 !important;` to a media query make any difference? Granted, it would make the font weight 300 on all like-size screens, which is kind of overkill, but it might solve the Android problem. – Christopher Bennett Apr 27 '19 at 11:45
  • How would that look like in CSS? Is there a way to configure "bold" for all "bold" declarations? Otherwise it would require to change a whole lot of code. – merlin Apr 27 '19 at 11:54
  • Hard to know how to answer that without seeing your code.I suppose that if you declared the font weight using the word "bold" on each element instead of globally, then there is no way to override it on the global scale. However, if you have an editor that has a universal "search-and-replace" feature, you can replace the word "bold" with "none" (this will allow you to globally override the font-weight) - then when setting your media queries, you could use a global override(*) for all screen sizes that aren't android sizes to set the font-weight to bold. – Christopher Bennett Apr 27 '19 at 12:10
  • There is nothing special about the code. This text is just declared as "bold". 700 seems also to be the font weight on all other devices, the question is why does it look so much more bold on android? I suspect that there is something different going on as it is only in "roboto" which is as far as I know an android default font. Strange that it does not look OK especially in android. – merlin Apr 27 '19 at 12:43
  • Agreed. Roboto is a Google font, so it should render properly in everything google (Android and Chrome included). I can't think of a reason why it would appear differently. Running some google searches does show quite a few people having trouble with that specific font though. Strange – Christopher Bennett Apr 27 '19 at 12:50
  • I came across this post discussing font weight problems based on different browsers rendering text differently. Have a look, maybe one of their suggestions might work for you --- https://stackoverflow.com/questions/5082632/same-font-except-its-weight-seems-different-on-different-browsers – Christopher Bennett Apr 27 '19 at 13:17
  • @merlin Did you find a solution to this? I'm experiencing the same issue. – Chris May 06 '19 at 08:59
  • unfortunatelly not, I guess that roboto in bold just looks bad on non retina screens. – merlin May 06 '19 at 09:00

0 Answers0