Search code examples
htmlcssfont-facefont-sizetruetype

CSS font-face font size compatibility issue firefox

So, I've designed a single page layout using HTML/CSS. The page can be found here:

http://letsrob.org/

So, the header text of the page is a custom font that I've loaded using the font-face property. The font-size and face are perfect on chrome, but the size is bigger on firefox, and sometime, the font itself looks a bit different. Why is this so? The whole page gets disrupted because of the header font alone!

My Font-face code:

@font-face {
    font-family: "logotext";
    src: url(http://letsrob.org/css/BEBAS.ttf) format("truetype");
}
@font-face {
    font-family: "captiontext";
    src: url(http://letsrob.org/css/Franchise-Bold-hinted.ttf) format("truetype");
}

My header CSS classes:

<div id="banner" style="margin-top:20px;color:white;font-weight:bold;font-size:1.75em;font-family:logotext;text-align:center;">Reclaim Our Beaches</div>

<div style="color:white;font-weight:bold;font-size:3em;font-family:captiontext;text-align:center;margin-top:20px;">ROB SYMPOSIUM: Talking trash, Exposing waste</div>

<div style="color:white;font-weight:bold;font-size:1.5em;font-family:captiontext;text-align:center;margin-top:20px;">10AM to 5PM, 18 & 19th AUGUST,2012</div>
<div style="color:white;font-weight:bold;font-size:1.5em;font-family:captiontext;text-align:center;margin-top:10px;">Conference Hall, School of Media Studies, Loyola College, Chennai</div>

Please visit the page using firefox to see the disruption. It works perfectly fine on chrome!

Thanks in advance

Solution

  • It looks like the only weight in your font is bold. Because you’ve specified font-weight:bold in your CSS Firefox is trying to auto-bold an already bold typeface by expanding the glyphs. Removing that rule fixes it (and also looks nicer in Chrome on my Mac).