Продолжим тему интеграции шрифтов на сайт, которую я начал в статье Интеграция шрифтов Google Web Fonts. Вы не нашли подходящий шрифт на выше упомянутом сервисе от Google, или Вы пытаетесь свести к минимуму что-либо подгружаемое при построении страниц Вашего сайта, интегрировать шрифты придётся ниже описанным способом.
Первым делом Вам необходимо будет найти файл со шрифтом и скачать его себе на компьютер. Для нормальной интеграции и в дальнейшем безоблачного использования шрифта, этот файл будет необходим в 3 форматах:
- Embedded OpenType (расширение eot) – это формат, внедряемых в web-страницы шрифтов Open Type, разработанный корпорацией Microsoft;
- Web Open Font Format (расширение woff) – это формат сжатого шрифта Open Type или True Type, полностью совпадающий со своим оригиналом;
- TrueType (расширение ttf) – это формат компьютерных шрифтов, который разработала фирма Apple.
Я обычно создаю отдельную директорию fonts в директории css (в ней обычно, находятся файлы стилей сайта), куда и скидываю все файлы интегрируемых мной шрифтов.
Далее, используем в начале файла стилей сайта правило CSS:
@font-face { свойства шрифта }
Вы должны помнить, что данное правило поддерживается только 2 и 3 версией CSS. Рассмотрим интеграцию на примере шрифта Corinthia, можете скачать тут, архив с файлами шрифта и кодом CSS для интеграции. Я обычно код интеграции вписываю в отдельный файл стилей fonts.css и потом подключаю его в начале основного файла стилей сайта еще одним правилом CSS:
@import url("имя файла") [типы носителей];
или
@import "имя файла" [типы носителей];
Итак, пишем в файле стилей, в котором Вы производите интеграцию шрифта, следующие строки:
@font-face {
font-family: 'Corinthia';
src: url('fonts/corinthia.eot');
src: url('fonts/corinthia.eot?#iefix') format('embedded-opentype'),
url('fonts/corinthia.woff') format('woff'),
url('fonts/corinthia.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Обратите внимание, файлы шрифта располагаются в отдельной директории fonts. Теперь Вы можете его использовать, как и стандартные шрифты с помощью:
font-family: 'Corinthia', sans-serif;
Пример нашего шрифта: Шрифт Corinthia
Существуют специальные on-line сервисы, так называемые Webfont Generator. Там можно настроить, что именно будет в файлах шрифтов с расширениями: eot, ttf и woff. Плюс при запуске генерации, Вам будет предложено скачать уже готовый пакет с файлами. В него будут входить сами файлы интегрируемых шрифтов, файлы CSS и файл index.html, представляющий собой демонстрацию полученного пакета. Вот один из таких сервисов www.fontsquirrel.com.
