Нередко бывает, что клиент хочет "вот этот красивенький шрифтик ААА" себе на сайт. Раньше это было в большинстве случаев недоступно, пока не появились различные библиотеки для работы с нестандартными шрифтами либо тот же @font-face. 

Существуют также решения типа sIFR, cufon, и другие, хотя они, возможно, по сравнению с предлагаемым методом не так элегантны. Холиварить, что лучше мы не будем. Да и с @font-face могут быть проблемы с лицензиями на шрифты и другие вещи.

Еще когда-то большая часть сайтостроителей пользовались картинками (да и сейчас замечается). Иногда мне в те времена приходилось отказываться от картинок в пользу быстрой загрузки сайта (ведь тогда еще скорость Интернетов была не такая как сейчас). Но заказчику объяснить, почему лучше не использовать тот или иной "красивенький" шрифт — весьма трудно. Да и не должно такое быть на самом-то деле!

Какой же вариант наиболее оптимален?

В общем, каждый решал (решает) вопросы, возникшие со внедрением нестандартных шрифтов по-своему. Кому-то они нравятся, а кто-то, быть может, часто наступает на грабли.

Поэтому стоит рассмотреть (а кому-то напомнить) о замечательном сервисе — Google Font API. Сразу предупрежу: это не панацея, не решения всех проблем, но как отличная альтернатива всему тому, чем мы пользовались раньше/пользуемся сейчас.

С помощью Google Font API можно внедрять веб-шрифты на любую веб-страницу, как и большинство других инструментов позволяют это делать. В чем же преимущества?

Google Font API включает в себя:
Выбор высококачественных оупенсорс-шрифтов.
Работает в большинстве браузеров (но не во всех).
Крайне прост в использовании.
Поскольку все хостится на Google, поэтому сохраняется пропускная способность.
Поскольку они находятся в одном и том же месте в Интернете, веб-браузер будет их кэшировать и для других сайтов, загрузив только раз.
Минусы:
Все-таки неполная поддержка браузеров (например, Firefox 3.6.13 Ubuntu!)
Очень малое количество кириллических шрифтов (есть надежда, что скоро их будет больше)
ПО поводу малого количества — есть возможность добавлять свой шрифт.

Так же есть просмотрщик шрифтов, с помощью которого можно подобать шрифт и его характеристики, который нужен. А для Chrome в дополнение к этому предлагается специальное расширение.

Как уже говорилось, использование API очень просто. Просто добавьте в секцию ... веб-странички строчку, которая будет загружать необходимые CSS. А затем использовать его в вашем CSS следующим образом:

h1 { font-family: 'Lobster', arial, serif; }

Как работает API? Когда браузер посылает запрос на получение таблицы стилей к Google Font API (как указано в теге ), Font API генерирует таблицу стилей для конкретного браузера пользователя, сделавшего запрос. Это в основном помогает разработчикам проверить версию браузера и вставить нужный CSS.

Для лучшего отображения в IE, вставляйте тег первым элементом в секции . В IE, если ссылка размещена после тега , вся страница будет блокироваться и не отобразится ничего, пока веб-шрифт не загрузится.

Chrome, Opera, Safari и Internet Explorer покажет пробел перед тем, как шрифт загрузится, а FireFox же покажет недекорированый шрифт. Google предлагает загрузчик, который заставляет всех браузеров вести себя, как FireFox.

Вот пример, взятый из Google документации интерфейс работы со шрифтами:


1.
2.
3.
4.
5.
6. WebFont.load({
7. google: {
8. families: [ 'Tangerine', 'Cantarell' ]
9. }
10. });
11.
12.
13. .wf-inactive p {
14. font-family: serif
15. }
16. .wf-active p {
17. font-family: 'Tangerine', serif
18. }
19. .wf-inactive h1 {
20. font-family: serif;
21. font-size: 16px
22. }
23. .wf-active h1 {
24. font-family: 'Cantarell', serif;
25. font-size: 16px
26. }
27.
28.
29.
30.

This is using Cantarell

31.

This is using Tangerine!

32.
33.

Для интересующихся рекомендую сходить на Google Font API, чтобы увидеть список доступных шрифтов и почитать документацию.

Итак, что наиболее оптимально - выбирать всегда вам, я лишь привел свои размышления по сему поводу. Может кто-то решит, что это лучший способ, а кто-то убедится, как НЕ нужно делать. Да и случаи внедрения бывают неоднородные.

В любом случае пусть будет этот Ваш выбор на пользу того дела, которое вы делаете.

Источник: habrahabr.ru