Your font is not displayed because it is not installed on your computer, as well as almost all the others to which you serve your site. SuperChief will do this by posting the font files themselves and using the @font-face declaration to add the font to your 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 from the FontSquirrel generator , which you can use to include fonts on your page.
You need to save the generated font files on your server and reference them in your @font-face declaration. Then you can specify them, as it was in your OP:
font-family: "LeagueGothic","Helvetica Neue","Helvetica","Arial";
Note that each font-family requires its own @font-face declaration.
A good point made by ceejayoz in the comments is that some fonts require licensing for use on a web page. FontSquirrel also gives you this warning, so check and make sure you are allowed to use fonts on your page.
Another solution would be to let Google host the fonts for you in the Webfonts service. It's easier than using your own @font-face and faster, but you get a more limited set of fonts that doesn't include the exact one you want. A similar font or replacement can be found.
source share