Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I working on a website - goodmorninghomes.com

The 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.

share|improve this question
1  
Will take a look now, bare with me! I've seen snails move faster than your website. Taking 20secs-30secs to load on chrome and firefox...... Maybe consider speed testing your site and getting a new host? –  bybe Jan 30 '13 at 17:09
    
It's working a little faster now, web host most of been doing something or overloaded. –  bybe Jan 30 '13 at 17:11
    
It seems fine here, tested in all browsers. –  guisasso Jan 30 '13 at 17:15
    
Perhaps provide a screenshot of what it should look like and what it looks like for you in Firefox? –  w3d Jan 30 '13 at 17:30
    
Posted fix, please ensure you post on the correct site and give more detail of the 'EXACT' Problem as it took awhile for me to find what you was referring to as you have many fonts on that page and other people won't even bother looking though your code. So give better examples as W3D suggested. –  bybe Jan 30 '13 at 17:37
show 1 more comment

1 Answer 1

up vote 3 down vote accepted

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: http://www.font2web.com/

Furthermore and finally this question is more suitable for Stack OverFlow ;)

share|improve this answer
    
Thanks for figuring that out. I never realized that the font is not working at all. That was a silly mistake on my side. And about posting at the right place, i honestly never really understood the which site is exactly for what kind of questions :\ –  ishan Feb 1 '13 at 9:47
    
Hi Ishan, Things like JavaScript and CSS are better suited Stack Overflow - while webmaster related things are suited for here. It can be pretty confusing at first but your soon get the swing of things. I'm glad I could of been help. Enjoy the Fix ;) –  bybe Feb 1 '13 at 12:45
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.