Using LeagueGothic Font

I am trying to use the font "LeagueGothic" or an option similar to my site. Sites such as "http://www.woostercollective.com" and "http://www.superchief.tv" are used as headings. Although for some reason, after I drag and drop their header styles through firebug and drop them into my CSS, it remains rendering in "Arial". I am missing something with this font - I also switched the syntax to ' ' and not to " " , and tried several other options.

 font-family: "LeagueGothic","Helvetica Neue","Helvetica","Arial"; 
+4
source share
1 answer

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.

+8
source

Source: https://habr.com/ru/post/1387240/


All Articles