1. Найти шрифт
Главная и самая не простая задача! Шрифтов много, а идеальный только один и его нужно найти. К тому же не все шрифты будут идеально подходить к Вашему сайту. Очень важно, чтобы шрифт подходил по стилю сайта. Второй фактор, это читабельность. Есть такие шрифты, которые при большом размере еще можно прочитать, но при размере 12-14 пикселей, это попросту невозможно. На крайний случай такие шрифты лучше использовать максимум для вывода заголовков типа h1. Есть еще один момент. Шрифты как и многое другое, может быть чьей-то собственностью и кто-то может заявить на него свои права. Если не хотите иметь проблем с авторскими правами, используйте только бесплатные шрифты или покупайте.
2. Формат шрифта
Чаще всего шрифты идут в формате TTF. Такой формат использует операционная система windows. Первым из браузером его понимает Firefox. Но для того чтобы все браузеры отображали корректно, шрифт должен быть в нескольких расширениях. Чтобы знать какие расширения поддерживают разные браузеры.
- Любая версия Internet Explorer понимает шрифт типа - EOT;
- Firefox начиная с версии 3.5 понимает – TTF и OTF (а с версии 3,6 научился понимать WOFF);
- Opera, начиная с 10 версии, работает с - TTF и OTF шрифтами;
- Все версии GoogleChrome понимают SVG шрифты, но в 2010 г научился читать всеми любимые TTF и OTF;
- В Safari, начиная с версии 3.2, работает с TTF и OTF шрифтами.
3. Подключение шрифта
Подключить шрифт можно двумя способами.
- 1. Подключить шрифт разместив его у себя на сайте.
- 2. Подключить шрифт со стороннего сервиса.
И так рассмотрим первый способ. Нужно сразу искать шрифты, которые идут полным комплектом с разными расширениями. Если же вам нравится шрифт, а он идет только в формате TTF, то можно использовать сервис для генерации шрифтов.
Для начала создайте папку на сайте - в теме сайта, шаблоне или просто в корне. Назовем ее к примеру font. Туда надо положить файлы шрифта с разными расширениями как это было описано выше. Например мы используем шрифт - helioscond-webfont. В папке должно лежать три файла.
- helioscond-webfont.eot
- helioscond-webfont.ttf
- helioscond-webfont.woff
И так, чтобы подключить шрифт, нужно прописать строки кода в Ваш файл стилей. за частую это файл style.css. Если у Вас другой, то в него. В самом верху добавляем следующее
@font-face {
font-family: 'helioscondregular';
src: url('font/helioscond/helioscond-webfont.eot');
src: url('font/helioscond/helioscond-webfont.eot?#iefix') format('embedded-opentype'),
url('font/helioscond/helioscond-webfont.woff') format('woff'),
url('font/helioscond/helioscond-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Если вы скачаете готовый архив со всеми форматами или используете генератор, который выдаст, тот же архив, то там внутри будет файл со стилями, если же нет? используйте как в примере, изменяя названия и путь.
Во второй строке, задаем имя шрифта и потом если какому-то классу или id задать стиль с использованием данного шрифта просто прописываем данную строку с названием шрифта.
Пример:
#footer{
background: #1982d1;
padding:32px 25px 0;
margin:0;
font-family: helioscondregular;
}
Далее идет подключение каждого файла с разным расширением, чтобы все браузеры понимали что от них хотят, так сказать, задаем кроссбраузерность.
В конце указываем стиль шрифта. В данном случаи, это нормальный - normal. Бывает еще - bold и light или regular. Если у Вас все или несколько, то для каждого прописывается повторно. Также обратите внимание на путь. У меня папка font лежит в том же каталоге что и файл стилей, поэтому в стилях путь
font/helioscond/helioscond-webfont.eot
Если у Вас другой путь, то корректно укажите его.
Таким образом, будет подключен шрифт, который лежит на Вашем сайте.
Второй способ, это подключение шрифта с стороннего сервиса. Для примера выберем google шрифты, которые можно найти здесь - google.com/webfonts
Подключение со стороннего сервиса, тоже осуществляется тремя способами.
Первый через элемент link в шапке Вашего сайта перед закрывающимся тегом head. Строка будет иметь примерно следующий вид.
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
Второй вариант, через правило @import. Такую строку вставляем в свой CSS-файл в самом верху.
@import url(https://fonts.googleapis.com/css?family=Cuprum&subset=latin,cyrillic);
Третий вариант, с помощью javascript. Каки в первом варианте подключаем скрипт.
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Cuprum::latin,cyrillic' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
В стилях к классу или айди указываем - font-family: 'Cuprum', sans-serif; В нашем примере это шрифт Cuprum.
У способа подключения шрифтов через сторонний сервис, есть свои плюсы
- Шрифты являются бесплатными в использовании, проблем с авторскими правами не будет.
- Шрифты оптимизированы уже для работы на сайтах и имеют малый объём.
- Определение браузера осуществляется автоматически и под него выдаётся шрифт в нужном формате.
Теперь Вы знаете, как можно подключить сторонний шрифт к своему сайту. Каким именно способом, решать Вам.
На этом все. Спасибо за внимание 🙂
