Using LeagueGothic Font

Question

I'm trying to use 'LeagueGothic' font or a variation to similar on my site. Such as on sites like 'http://www.woostercollective.com' and 'http://www.superchief.tv' used as their headers. Though for some reason, after I drag their header styles out via firebug and throw them in my CSS it remains rendering at 'Arial'. Am I missing something with this font - I've also toggled the syntax to ' ' rather then " " and tried a few other variations.

font-family: "LeagueGothic","Helvetica Neue","Helvetica","Arial";

Answer 1

Your font isn't displaying because it's not installed on your computer, as well as almost all others you serve your site to. SuperChief gets around this by hosting the font files themselves and using an @font-face declaration to add the font to their CSS:

@font-face {
    font-family: 'LeagueGothic';
    src: url('fonts/league_gothic/league_gothic-webfont.eot');
    src: url('fonts/league_gothic/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/league_gothic/league_gothic-webfont.woff') format('woff'),
         url('fonts/league_gothic/league_gothic-webfont.ttf') format('truetype'),
         url('fonts/league_gothic/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

This code looks to be from the FontSquirrel generator, which you can use to include fonts in your page.

You need to store the generated font files on your server and reference them in your @font-face declaration. Then you can specify them as you have done in your OP:

font-family: "LeagueGothic","Helvetica Neue","Helvetica","Arial";

Do note that each font-family needs it's own @font-face declaration.

A good point made by ceejayoz in the comments is that some fonts require licensing to be used in a web page. FontSquirrel gives you this warning too, so check and make sure you're allowed to use the fonts in your page.

---

Another solution would be to let Google host the fonts for you on their Webfonts service. It's easier than using your own @font-face and faster too, but you get a more limited selection of fonts, which doesn't include the exact one you want. A similar font or replacement could be found.