Ваш шрифт не отображается, потому что он не установлен на вашем компьютере, а также почти на всех других, которым вы обслуживаете свой сайт. SuperChief справляется с этим, размещая сами файлы шрифтов и используя объявление @font-face, чтобы добавить шрифт к их 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;
}
Этот код выглядит как генератор FontSquirrel , который можно использовать для включения шрифтов на страницу.
Вам необходимо сохранить сгенерированные файлы шрифтов на вашем сервере и ссылаться на них в вашей декларации @font-face. Затем вы можете указать их, как вы сделали в своем OP:
font-family: "LeagueGothic","Helvetica Neue","Helvetica","Arial";
Обратите внимание, что каждый font-family нуждается в собственной декларации @font-face.
Хорошее замечание, высказанное ceejayoz в комментариях, заключается в том, что некоторые шрифты требуют лицензирования для использования на веб-странице. FontSquirrel также предупреждает вас об этом, поэтому проверьте и убедитесь, что вам разрешено использовать шрифты на вашей странице.
Другим решением было бы позволить Google разместить шрифты для вас в их сервисе Webfonts . Это проще, чем использовать собственный @font-face и быстрее, но вы получаете более ограниченный выбор шрифтов, который не включает в себя именно тот, который вам нужен. Можно найти похожий шрифт или замену.