Шрифты для сайта с помощью CSS @font-face

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Продолжаем серию статей о CSS. Сегодня речь пойдет о свойстве CSS@font-face. С помощью которого стандартные шрифты, можно заменить на более совершенные, пользовательские. Эти шрифты Вы можете выбрать в сети или создать самостоятельно. Также рассмотрим использование шрифтов с иконками. И в качестве дополнения, покажу еще несколько способов использования нестандартных шрифтов на сайте.

Где искать шрифты?

Наверняка, первый вопрос который возникает в голове: Где искать эти шрифты? На самом деле все не так уж и сложно. В сети достаточно ресурсов, на которых есть разнообразные шрифты. Как с латинскими символами так и с кириллицей. К примеру, ВОТ сайт со шрифтами в том числе есть кириллица, отдельный раздел. Или вот еще, преимущественно латинские шрифты, однако есть и кириллица. Хочу заметить, что скачивать нужно именно для @font-face.

Допустим Вы выбрали шрифт, на последнем сервисе.

Понравившийся шрифт для сайта

Далее переходим на вкладку @font-face Kit и выставляем параметры: язык и форматы.


Устанавливаем параметры и скачиваем архив шрифта

Примерно по такой аналогии, можно искать и скачивать шрифты.

Гораздо больше шансов найти обычный шрифт в формате .ttf, стандартный шрифт для системы Windows. И с помощью генератора преобразовать недостающие форматы.


Генератор @font-face

Использование @font-face

Для начала, давайте поговорим об исконном способе реализации пользовательских шрифтов — @font-face. Синтаксис CSS для объявления пользовательского шрифта очень простой. В общем, нужно указать название шрифта, и источник файла шрифта. После, его можно применить к любому элементу.

@font-face {
   font-family: "MyFontName";
   src: url('font.ttf');
}

body {
   font-family: "MyFontName";
}

Так как, разные браузеры поддерживают разные форматы пользовательских шрифтов. Дабы избежать коллизий в отображении на сайте и добиться кроссбраузерности, лучше использовать следующий способ.

@font-face {
    font-family: 'SansationRegular';
    src: url('Sansation_Regular-webfont.eot');
    src: url('Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Sansation_Regular-webfont.woff') format('woff'),
         url('Sansation_Regular-webfont.ttf') format('truetype'),
         url('Sansation_Regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body {
   font-family: "SansationRegular";
}

В результате использования шрифта Sansation получаем вот такой результат.

Результат использования @font-face

Использование шрифтов с иконками

Здесь тоже нет ничего сложного. Сложнее наверно найти подходящий шрифт с иконками. ВОТ неплохой набор с векторными иконками. С подробными примерами использования. Скачиваем архив, распаковываем 2 папки: font и css. К странице присоединяем два файла .css, которые находятся в одноименной папке. Все, теперь иконками можно пользоваться.

В документации вы найдете название каждой иконки. И это название используется в качестве класса тега <i>. Давайте используем иконку домика.

<div style="font-size: 24px;">
  <i class="icon-home"></i> Иконка домика!
</div>

Шрифт с иконкой

Сервисы

Есть еще способ использования шрифтов, не беспокоясь о вопросе кроссбраузерности и лицензии — это сервисы Typekit и Fontdeck. Эти сервисы по большей части платные, однако присутствуют бесплатные аккаунты. Например у сервиса Fontdeck шрифты бесплатные если Ваш сайт имеет не более 1 миллиона просмотров в месяц. На мой взгляд хорошее условие, по крайней мере мне оно точно подходит :) Плюс процесс подключения шрифтов проще.

Ну и конечно, нельзя не сказать о Google Web Fonts. Шрифты от google бесплатные, легковесные и их также легко использовать.

Стандартный способ подключения:

<link href='http://fonts.googleapis.com/css?family=Russo+One&subset=cyrillic' rel='stylesheet' type='text/css'>

И применение:

body {
font-family: 'Russo One', sans-serif;
}

На этом все. Остается только выбрать наиболее подходящий для Вас способ использования пользовательских шрифтов. Лично я юзаю Google Web Fonts — удобно, красиво и бесплатно :)

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или подпишитесь на Google+. Если Вы используете какой-то другой способ, напишите о нем в комментарии. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

  • Tema Enjoyt

    Спасибо