Hey guys,

 

so I am finishing a website and I am doing the final corrections. One thing that bothers me is the font..

I've got an imported google font.. in Chrome it looks fine, but in Firefox it's bs.

 

Why is it, that ther's such a big difference? How can I make the site look the way I intend, acoss all the browsers? Do I need to keep changing fonts until I find one that looks good in other browsers too ?

 

Thanks

 

Font display can vary a lot across different browsers, operating systems, screen resolutions and so on.

 

It does look like Firefox is not picking up the font-family declaration, it could be something in your CSS that's wrong so suggest you check that first.

I've had some very annoying issues with firefox and fonts. Some fonts firefox just doesn't seem to like for some reason.

Ok, here's the font's CSS:

 

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400,300);

font-family: 'Open Sans Light', sans-serif;
 

I'm not sure - but I wonder whether you should not have the word "Light" but should maybe use font-weight: 300.

 

I am typing this hesitantly as I may be way off.

 

I don't know why it would work in Chrome though ... hmmm...

Edited March 15, 201412 yr by Jane B

Jane B is right http://cdpn.io/wzats

I'm not sure - but I wonder whether you should not have the word "Light" but should maybe use font-weight: 300.

 

I am typing this hesitantly as I may be way off.

 

I don't know why it would work in Chrome though ... hmmm...

 

Your are very right on this, I'd be tempted to go the extra step and declare the font-family as 'Open Sans', sans-serif; then have a separate declaration for font-weight on another line. This seems to be more reliable with mobile browsers too.

I find Chrome often renders fonts worse that FF and even IE!

Great, that fixed it. Also a good thing to know for the future...

Thanks Jane.