CODEWITHSUNDEEP
cssgoogle-chromefirefoxcross-browser
Angel M.
Angel M.

Reputation: 2732

CSS font difference in Firefox and Chrome

enter image description hereI have issues with font difference in Firefox/Chrome. All the fonts seems bolder and bigger in Chrome than in Firefox, but I'd like to be like they are in Firefox. I tried to add different properties, but seems nothing really works. I'm using twitter bootstrap, so normalize.css is already included. Any ideas, why such a difference?

I'm attaching photo, and here is the css used:

body{
  background-color: #f9f9f9;
  color: #555555;
  font-family: Arial,sans-serif;
  font-size: 14px;
  line-height: 1.42857;
  font-weight:400;
  font-size-adjust: 0.5;
  font-weight:400;
  -webkit-text-stroke: 0.7px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; 
  -webkit-transform: translate3d(0px, 0px, 0px); 
}

h3 {
  font-family:"Lato",sans-serif;
  font-weight: 300;
  letter-spacing: normal;
  margin-bottom: 33px;
  word-spacing: 2px;
  font-size: 2.5em !important;
  line-height: 2 !important;
}

and the imported font:

<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>

Here is the link, and attached image of how I see it on my browswers.

JSFiddle enter image description here

Upvotes: 2

Views: 4080

Answers (1)

Mr Lister
Mr Lister

Reputation: 46539

The browsers don't all support the same font display features yet, unfortunately. If you only use the basics, the fonts will look the same across browsers.

div {
  font: 14px/20px 'Arial', 'Liberation Sans', 'Helvetica Neue', sans-serif;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

But some features, such as font-size-adjust, will only have an effect in some browsers, not others.

div {
  font: 14px/20px 'Arial', 'Liberation Sans', 'Helvetica Neue', sans-serif;
  font-size-adjust: 0.4;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

Same for things like -webkit-text-stroke and the like.

div {
  font: 14px/20px 'Arial', 'Liberation Sans', 'Helvetica Neue', sans-serif;
  -webkit-text-stroke: 0.7px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; 
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

So in the end it's a trade-off between full cross-browser compatibility or getting the best possible result in each.

Upvotes: 1

Related Questions