fontsquirrel.com - интересная альтернатива Google Fonts

Font Squirrel logoСегодня получил очередную нарезку от клиента. Дизайнер, некая Joane, указала в описании к макету:

> Headings utilize League Gothic, which has a @font-face Kit available for download at http://www.fontsquirrel.com/fonts/League-Gothic

Поначалу я напрягся, т.к. найти этот фонт на привычном Google Fonts не удалось. Пришлось разбираться. Зашел на указанную страницу шрифта:

http://www.fontsquirrel.com/fonts/League-Gothic

Там, как было сказано, клацнул @font-face Kit, почитал, скачал, получил комплект шрифтов, CSS и два файла: один с лицензией и демку.

Оказалось, что подключить просто. Выполняем по шагам:

  1. создаем в скриптах папку /fonts
  2. копируем в неё содержимое полученного архива
  3. в своей HTML-ке подключаем stylesheet.css, у меня это выглядело так (я переименовал stylesheet.css в league-gothic.css, на случай, если будут еще и другие шрифты):
    <link rel="stylesheet" type="text/css" href="web/s/fonts/league-gothic.css">
  4. в своём CSS-е, используем обычную нотацию:
    font-family: LeagueGothicRegular;

Протестировал на кроссбраузерность - всё отлично.

Удобно, быстро, практично. Пользуемся.

Поделитесь с друзьями:



2 комментариев к “fontsquirrel.com - интересная альтернатива Google Fonts

  1. Одно плохо - Fontsquirrel, как и Google Fonts, имеет недостаток. Вернее, недостаток имеют не они, а Опера.

    Если человек работает в Windows под кириллическим именем пользователя, например Андрей, то у него в Опере не работает ни Fontsquirrel, ни Google Fonts, а работает только Cufon.

    А доля Оперы в просмотрах сделанных мною сайтов - 27%, так что "забыть" о ней не получается.

    Жаль, конечно.

    • Странно, у меня отображается на ура. Вы можете дать пример, который отображается неправильно?
      Cufon - знаю, офигенная "затычка" когда нет альтернатив.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>