Question

I have a few weird issues I need to solve.

First, let me show my @font-face declarations in my CSS file.

@font-face {
font-family: "Conv_Gotham-Book";
src: url("fonts/Gotham-Book.eot");
src: local("☺"), 
    url("fonts/Gotham-Book.woff") format("woff"), 
    url("fonts/Gotham-Book.ttf") format("truetype"), 
    url("fonts/Gotham-Book.svg#Gotham-Book") format("svg");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Conv_Gotham-Light";
src: url("fonts/Gotham-Light.eot");
src: local("☺"),
    url("fonts/Gotham-Light.woff") format("woff"), 
    url("fonts/Gotham-Light.ttf") format("truetype"), 
    url("fonts/Gotham-Light.svg#Gotham-Light") format("svg");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Conv_Gotham-Medium";
src: url("fonts/Gotham-Medium.eot");
src: local("☺"), 
    url("fonts/Gotham-Medium.woff") format("woff"), 
    url("fonts/Gotham-Medium.ttf") format("truetype"), 
    url("fonts/Gotham-Medium.svg#Gotham-Medium") format("svg");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Conv_Gotham-Bold";
src: url("fonts/Gotham-Bold.eot") format("eot");
src: local("☺"),
    url("fonts/Gotham-Bold.woff") format("woff"), 
    url("fonts/Gotham-Bold.ttf") format("truetype"), 
    url("fonts/Gotham-Bold.svg#GothamBold") format("svg");
font-weight: normal;
font-style: normal;
}

Problems: Hyperlinks using any of those custom fonts don’t work in only one browser/platform combination Firefox 13.0.1/Mac (Example here: http://lonely-dev.com/leapfrogbeta/?page_id=896 on the headlines, )

Second Problem: Font disappears on iPad2/Safari browser.

Everything else is fine, would love some insight.

Answer 1

You have declared to use a font called “Journal” in your css for .custom .headline_area h2 a in custom.css while in the above code example you’re calling for the Gotham Family (which, btw, has no web license at the moment). Journal is loaded correctly in both Firefox/Mac and iPad/Safari. Links work in both.

Update: the font loads fine in all mentioned cases but the links aren’t working. This is because of a being an inline element. Also, declaring a height for the heading a is a bad idea. Just use this rule:

.custom .headline_area h2 a {
  display: block;
}

and the links will work.

Another thing is that you should declare the heading font on the h1, h2 etc. and not just on their contained links.