custom font in Firefox

Question

I have a problem with my custom font in Firefox, in all other browsers it works fine.

The problem is:

On the same page I have h2 and h3 - they are styled with the same fonts and the same way (other properties are a bit different), but for some reason FF loads h3 properly but doesn't for h2.

h2 and h3 have the same custom font(A), they both have :first-letter styled with custom font(B).

So, basically, h3 loads with both fonts, but h2 only with 1 font and ignores :first-letter. Any ideas on how I can fix this?

Thanks!

h2 {
    display: block; 
    width: 300px;
    height: 103px;
    font-family: 'Gotham Book';
    font-size: 1.6em;
    background: url('images/title-bg.jpg') no-repeat;
    text-align: center;
    letter-spacing: 0.1em;
    margin: 0 auto;
}

h2:first-letter {
    font: 2.2em 'Edwardian Script ITC';
    padding: 0 6px 0 0;
} 

h3 {
    display: block;
    margin: 100px 40px 40px 40px;
    font-family: 'Gotham Book';
    font-size: 1.1em;
    text-align: center;
    letter-spacing: 0.1em;
    border-bottom: dashed #2babcb;
    border-top: dashed #2babcb;
    border-width: 1px;
}

h3:first-letter {
    font: 2.2em 'Edwardian Script ITC';
    padding: 0 6px 0 0;
}

Hi welcome to stack overflow. Please can you post the relevant html and css code — Pete, Apr 24 '14 at 14:16
Do you have any other CSS on the `h2` that may be more specific or `!important` that might override? — Matt K, Apr 24 '14 at 14:39
If you can't get it working with a pseudo selector, you could always wrap the first letter in a span tag with a "first-letter" class. — APAD1, Apr 24 '14 at 14:40
possible duplicate of [What is the best way to include custom font using CSS to make it compatible with maximum browsers?](http://stackoverflow.com/questions/18871680/what-is-the-best-way-to-include-custom-font-using-css-to-make-it-compatible-with) — Liam, Apr 24 '14 at 14:41
seems to work fine for me: http://jsfiddle.net/4KNG9/, you must have other style affecting the h2 - does it have an extra class or id that you have styled? — Pete, Apr 24 '14 at 14:42
@MattK No I don't. This is it. And I haven't used !important on CSS at all. — baiba, Apr 24 '14 at 14:43
Even if you haven't used important, there still could be an overriding style. Try to make the selector more specific, the more specific it is, the higher precedent it takes. — APAD1, Apr 24 '14 at 14:45

sidneydobber · Answer 1 · 2014-04-24T15:32:05.577

1

Try to check Firebug or Chrome Developer to see what is happening. Probably your styles are overwritten, it will at least give you a place to start. Otherwise check the elements you are styling, maybe you have some JavaScript in your framework that changes styles which show up as inline styles. Good luck and let us know if you found the problem!

edited Apr 24 '14 at 15:32

answered Apr 24 '14 at 14:47

sidneydobber

2,790
1
23
32

http://jsfiddle.net/ZS569/ – sidneydobber Apr 24 '14 at 14:47
1

Yep, works fine for me in Firefox as well, the OP must be using Foundation or some other framework which is overriding the style. – APAD1 Apr 24 '14 at 14:47
@sidneydobber You are right, when I checked your link it works for me too. Ok, I will try all suggestions above. Thanks a lot! – baiba Apr 24 '14 at 14:51
Try to check Firebug or Chrome Developer to see what is happening. Probably your styles are overwritten, it will at least give you a place to start. Otherwise check the elements you are styling, maybe you have some JavaScript in your framework that changes styles which show up as inline styles. Good luck and let us know if you found the problem! – sidneydobber Apr 24 '14 at 14:57
This should really be a comment – Pete Apr 24 '14 at 15:15
Thanks for sharing Pete will do that from now on, I'm relatively new as a contributer so I need to learn the rules. – sidneydobber Apr 24 '14 at 15:22
I have fixed the problem. As the website works on WP, most of the text "sits" in _
_, so other _
_ styling was overriding my _h2_. I just made selectors as specific as I could. Thanks everyone for quick answers!
– baiba Apr 24 '14 at 15:28

custom font in Firefox

1 Answers1