: Why isn't mozilla rendering my custom fonts I working on a website - goodmorninghomes.com The site looks perfect in all browsers including internet explorer but not in mozilla and the problem

@Speyer207

Your find that neither Chrome or Firefox is rendering Ambient via the @Font -Face and what is happening is that the Crusive Font is rendering slightly different in Firefox than Chrome (Very Little Difference, but its using Crusive not Ambient, Fix posted below)

Chrome, and Firefox render fonts differently from one another so sometimes you notice no change, little change or sometimes noticeable change. The font that is being used is Cursive and not Ambient because this is not setup right.

IN THE HTML

<div class="grid_6" id="call">Call: 099 XX XX XX XX</div>


IN THE CSS FOR THIS ELEMENT
#call {
font-size: 18px;
color: #a27780 ;
font-family: ambient, sans-serif;
}


** IN THE CSS FOR @FACE
@font -face {
font-family: 'ambientmedium';
src: url('ambient-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}


Now if you pay attention and take a look at the @Font -Face for a second your notice that it uses the font-family 'ambientmedium' yet you are calling up on the font-family: ambient.

Change your FONT-FAMILY IN THE CSS FROM
#call {
font-size: 18px;
color: #a27780;
font-family: ambient, sans-serif;
}


TO

#call {
font-size: 18px;
color: #a27780;
font-family: ambientmedium, sans-serif;
}


ADDITIONALLY

You should consider using better FONT Compatibility, Your currently limiting your site to browsers than understand TTF there are versions and different browsers that can't work with TTF. You you add additional fonts to allow maximum compatibility - You want to use ttf, of, svg and woff. You can convert your fonts here: www.font2web.com/
Furthermore and finally this question is more suitable for Stack OverFlow ;)

Vote Up Vote Down