: 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

@Sue5673885

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;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust:none;
letter-spacing:0;
line-height:1;
zoom:1;

Vote Up Vote Down

@Jessie594

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 www.miltonbayer.com/font-face/

Vote Up Vote Down

@Cugini213

You need to convert the "Arimo" font to a web-font with a converter like 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.

Vote Up Vote Down