-3

I am using this Font right now:

https://www.google.com/fonts#UsePlace:use/Collection:Roboto

According to the guide I'll just have to include a link like this

And I've tried that... it worked but my problem is:

The output from Firefox and Chrome is different...

Chrome:

enter image description here

Firefox:

enter image description here

As you can observed from the two pictures... Firefox is displaying it right and smooth..

What am I missing here? Display from chrome is not that good.. any help would be much appreciated..

silent_coder14
  • 583
  • 2
  • 10
  • 38

2 Answers2

2

This depends on the default font of your browser. You did not specify a font-weight in the style. If you add font-weight: 300; in the style, you should see the same thing.

Edit I found the styles you added in Google font cause the issue. If you only add 300 and 300 italic it will give a better result. http://jsfiddle.net/5mnq06km/5/

body {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
}
b {
  font-weight: bold;
}
<link href='https://fonts.googleapis.com/css?family=Roboto:300,300italic' rel='stylesheet' type='text/css'>

<p>
  Some <b>Text</b>
</p>
Hans
  • 497
  • 3
  • 8
  • 1
    This won't always work. Sometimes it just depends on the browsers rendering. – Krii Dec 08 '15 at 13:57
  • 1
    That is true. However if you ensure all the styles are the same over all browsers, you make the chance of different results smallest. – Hans Dec 08 '15 at 14:22
0

Define weight of the font in your body so all browsers will handle it the same.

Font-weight:300;

L.Lawliet
  • 113
  • 4
  • 12