I working on a website - goodmorninghomes.comThe site looks perfect in all browsers including internet explorer but not in mozilla and the problem is the different fonts. I have included some custom fonts through @font-face CSS property and they are working properly in all browsers but not in firefox. The firefox console doesnt even show any problem. I just cant understand why this is happening.
why isn't mozilla rendering my custom fonts
firefox;css3
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;}ADDITIONALLYYou 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: http://www.font2web.com/Furthermore and finally this question is more suitable for Stack OverFlow ;)