Шрифты играю важную роль в любом проекте: правильно подобранный шрифт улучшает читаемость и создает приятное впечатление. Однако, подключение шрифтов часто становится непростым заданием, если верстальщик еще не набил руку на этом.
Прежде всего нужно обратить внимание, что не все расширения шрифтов одинаково хорошо поддерживаются браузерами. Самую большую сложность, конечно, составляет IE, например, ttf шрифты, чаще всего, предоставляемые заказчиками частично читаются в IE, а .woff2 вообще не читается.
В связи с этим все шрифты необходимо проводить через Transfonter или OnlineFontConverter. Даже если шрифт был предоставлен в одном расширение, вы сможете сгенерировать и другие с помощью этой программы.
Как же подключить шрифты к проекту?
1. Font-face
@font-face {
font-family: 'Web font';
src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Новейшие браузеры */ url('webfont.woff') format('woff'), /* Новые браузеры и IE9+ */ url('webfont.ttf') format('truetype'), /* Старые Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Древние Safari, iOS, Android */ font-weight: normal; font-style: normal;
}
Способ, который поддерживает, даже древние браузеры. Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.
2. Google Fonts (link)
Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ. Ссылка добавляется в <head></head> разметки HTML.
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic'
rel='stylesheet' type='text/css'>
...
</head>
3. @import
@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);
Такой код можно поместить в самое начало внешней таблицы стилей, и тогда все страницы, подключенные к этой странице, получат необходимый шрифт, который будет загружаться с помощью @import.
Очень важно подключать шрифты к проекту для создания приятного имиджа компании.
