# Website using different fonts across different browsers

The navigation board items on my website at www.amsa.mn uses the wrong font when displayed with Firefox. The correct font is loaded when I access the website with Safari or Chrome. Is there any way to force Firefox to load the correct font?

-
I checked the site using Chrome and FF, and the nav font looks pretty much the same. Are you sure its working for Chrome as well? –  Prasad Dec 17 '12 at 6:02
The same for me - I see the same font in both Chrome and FF. However, I suspect I'm seeing the wrong font in both browsers. Can you supply a screen shot of the preferred output? Glancing over your CSS I can't see where you are loading the font (I might have missed it)? There is a reference to "Arimo" - but I don't have this on my machine, so I assume it's defaulting to sans-serif for me? –  w3d Dec 17 '12 at 10:25

You need to convert the "Arimo" font to a web-font with a converter like http://www.fontsquirrel.com/fontface/generator. Your CSS references the Arimo font. Since the font is not available via CSS, it's attempting to load it locally. Most people won't have Arimo installed, so will see a default font instead.

-
Whilst I agree with your answer, how does this explain why Chrome displays the font OK, when Firefox does not? (I'm assuming the OP is testing these browsers on the same machine.) –  w3d Dec 17 '12 at 19:02
I'm not sure. It may have something to do with the fact that he's using the font tag. For some reason, FF is omitting the font tag. Chrome isn't. Now, that doesn't make a ton of sense, but it's the only thing I could find that's different between the two. –  NickWebman Dec 17 '12 at 19:36

You can load the fonts you want to use in your site like this

@font-face { font-family: Some-Font; src: url('Some-Font.otf'); } @font-face { font-family: Some-Font; font-weight: bold; src: url('Some-Font-Bold.otf'); }


Then apply them with

h3 { font-family: Some-Font, sans-serif; }


This will force it on all browsers

A good article about @font-face is here http://www.miltonbayer.com/font-face/

-

Looks fine when I check on firefox, I guess you have already found a solution? If not...

It is probably a declaration issue, or not having the correct file type of font that Firefox uses.

As NickWebman answered, go to somewhere like fontsquirrel.com, into their font-face section and either find the font you want and download it or convert one of your existing fonts.

Make sure to create/download all the different file types so your font will display in all browsers as the core browsers tend to prefer different file types - .woff, .ttf, .svg, .eot etc

TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone


One solution for Internet Explorer is to seperate it from the normal declaration e.g.

<!-- specific for IE - .eot -->

@font-face {
font-family: 'ProximaNova';
src: url('../fonts/ProximaNova.eot?') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
<!-- for the other browsers - .woff, .ttf, .svg
@font-face {
font-family: 'ProximaNova';
src: local('☺'), url('../fonts/ProximaNova.woff') format('woff'),
url('../fonts/ProximaNova.ttf') format('truetype'),
url('../fonts/ProximaNova.svg') format('svg');
font-weight: normal;
font-style: normal;
}


Or, thanks to the Bulletproof article on paulirish.com, a nicer solution:

@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}


Don't forget to put a fallback e.g. websafe fonts to fall back to in case everything goes pop e.g.

font-family:'yourfontfacefont', Verdana, Tahoma, Arial, Sans-Serif;


Even after all of the above the fonts just dont look correct in IE etc, you could try adding the following:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
-webkit-font-smoothing:subpixel-antialiased;
font-smoothing:subpixel-antialiased;