Установка шрифтов — один из важнейших этапов разработки дизайна сайта. В данном процессе множество нюансов как в плане дизайна. так и чисто технических. Рассмотрим различные аспекты связанные с установкой шрифтов на сайт.
Сайты с шрифтами
Подбираем шрифты, скачиваем исходники.
Сайты с шрифтами
fonts.google.com
webfonts.ru
allfont.ru
www.fontov.net
fontstorage.com
Подключение шрифта на сайте
В папке темы создаем папку fonts и в нее закачиваем файлы шрифтов (можно в корень, можно папками, далее мы будем прописывать к ним путь).
В файле стилей инициализируем шрифт, пример:
@font-face {
font-family: 'Cuprum';
src: local('Cuprum'), local('Cuprum-Regular'), url('fonts/cuprum/cuprum.woff2') format('woff2'), url('fonts/cuprum/cuprum.woff') format('woff'), url('fonts/cuprum/cuprum.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
Здесь же указывается путь до файла шрифта
url(‘fonts/cuprum/cuprum.woff2’) — в папке темы/fonts/cuprum/файл
url(‘fonts/fontawesome-webfont.ttf’) — в папке темы/fonts/файл
Не стоит использовать подгрузку шрифтов с других сайтов @import «http://webfonts.ru/import/cuprum.css»;. Это замедляет работу сайта.
Шрифты семейства Arial
font-family: «Arial Narrow»;
font-family: «Arial Black»;
Быстродействие
Шрифт загруженный на сайт будет работать быстрее чем подключаемый запросом со стороннего сервиса (например GoogleFont).
Чтобы подключить семейство шрифтов с разными вариантами начертания (bold, italic, light и т.п.) — надо их прописывать следующим образом:
@font-face {
font-family: "OpenSans";
src: local('OpenSans Regular'), local('OpenSans-Regular'), url("fonts/OpenSans/OpenSansRegular/OpenSansRegular.woff") format("woff");
font-style: normal;
font-weight: 200;
}
@font-face {
font-family: "OpenSans";
src: local('OpenSans Light'), local('OpenSans-Light'), url("fonts/OpenSans/OpenSansLight/OpenSansLight.woff") format("woff");
font-style: normal;
font-weight: 100;
}
@font-face {
font-family: "OpenSans";
src: local('OpenSans Bold'), local('OpenSans-Bold'), url("fonts/OpenSans/OpenSansBold/OpenSansBold.woff") format("woff");
font-style: normal;
font-weight: 400;
}
При этом в стиле глобального вызова шрифта (html, body) необходимо прописать базовую ширину — font-weight: 200;
В некоторых шрифтах (с того же GoogleFont) необходимо подключать версии шрифтов cyrillic и latin.
Добавление extended у шрифта обозначает наличие бОльшего количества символов кириллической группы, а также некоторые знаки (например №). У некоторых шрифтов определенные символы могут входить в «базовую комплектацию», а у других только в версию extended
Алгоритм извлечения шрифта с сайта GoogleFont
- Генерируем необходимый шрифт, получаем ссылку: https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&subset=cyrillic
- Вставляем ссылку в адресную и строку и получаем страницу подгрузки всех начертаний шрифта
- Выбираем необходимые начертания и копируем ссылки на woff2 файл также через строку браузера
- Называем файлы нормальными понятными названиями и закачиваем на сайт в папку с названием шрифта (предпочтительно в папку fonts внутри темы)
- Прописываем в стилях подключение шрифтов (Пример подключения шрифта PTSans):
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(fonts/PTSans/PTSansItalicCyr.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(fonts/PTSans/PTSansItalicLat.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 700;
src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(fonts/PTSans/PTSansBoldItalicCyr.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 700;
src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(fonts/PTSans/PTSansBoldItalicLat.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(fonts/PTSans/PTSansRegularCyr.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(fonts/PTSans/PTSansRegularLat.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url(fonts/PTSans/PTSansBoldCyr.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url(fonts/PTSans/PTSansBoldLat.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
