Как подключить шрифт в CSS?

Приветствую вас, дорогие друзья!

Сегодня мы поговорим о том, как подключить новый шрифт css к вашему сайту, что бы сделать его более оригинальным и привлекательным для посетителей.

В стандартном наборе содержится большое количество шрифтов, но, к сожалению, они не всегда соответствуют нашим требованиям. В этом случае мы можем выйти из ситуации, скачав новый понравившийся нам в интернете и подключить шрифт в css-файле.

Как подключить шрифт CSS?

1. 1.Заходим на сайт-каталог шрифтов. Их легко можно найти в поиске. Ниже я приведу пример одного довольно удобного сайта, который я обычно использую.
2. 2.Выбираем и скачиваем любой понравившийся нам. Чаще всего вам предоставляется для скачивания несколько файлов с различными вариантами исполнения (жирный, курсив, и т.д.), а так же с различными расширениями.
   Для наших целей лучше всего подойдет файл с расширением .ttf, так как он поддерживаться всеми браузерами. Так же файл может быть в форматах .eot, .woff, .svg. Для поддержки данного шрифта в старых версиях Internet Explorer и некоторых других браузеров желательно подключить и форматы .eot и .woff
3. 3.Скачанный файл нам нужно загрузить в папку fonts в корневом каталоге сайта. Если же ваш сайт сделан на WordPress или другой CMS, то вам нужно загрузить файл в папку fonts, которая находится в папке с темой оформления.
   
4. 4.Далее открываем css-файл стилей сайта или используемой темы. Это можно сделать, подключившись к сайту по FTP в текстовом редакторе NotePad++ или его аналоге.
5. 5.Затем нам нужно подключить шрифт CSS-правилом font-face. Для этого в самом начале файла стилей style.css, после комментария, содержащего информацию о теме, вставляем следующий код:
   
   PHP

   @font-face { font-family: 'Font Name'; src: url('fonts/ Font Name.ttf') format('truetype'); font-weight: normal; font-style: normal; }

   1 2 3 4 5 6

   @font-face {     font-family: 'Font Name';     src: url('fonts/ Font Name.ttf') format('truetype');     font-weight: normal;     font-style: normal; }

   Обратите внимание! Вместо текста «Font Name» вам нужно вставить название скачанного вами файла. И обязательно обращайте внимание на формат, так как у вас он может быть другой или их может быть несколько.

   Вот примеры подключения в CSS наиболее популярных форматов:

   PHP

   src: url('fonts/ Font Name.woff') format('woff'); src: url('fonts/ Font Name.eot') format('eot'); src: url('fonts/ Font Name.svg') format('svg');

   1 2 3

   src: url('fonts/ Font Name.woff') format('woff'); src: url('fonts/ Font Name.eot') format('eot'); src: url('fonts/ Font Name.svg') format('svg');

6. 6.Теперь наш шрифт подключен, и мы можем его использовать. Для того, что бы применить его к определенному блоку, нам нужно в css-стилях для класса этого блока дописать свойство font-family:
   
   PHP

   font-family: ' JuraBook ';

   1	font-family: ' JuraBook ';

   Например:

   PHP

   .main-navigation ul li a { font-family: 'JuraBook'; font-size:18px; }

   1 2 3 4

   .main-navigation ul li a {    font-family: 'JuraBook';    font-size:18px; }

Где скачать шрифты для подключения к сайту через CSS?

На сегодняшний день есть огромное количество различный ресурсов для скачивания шрифтов, но лично мне больше всего нравится вот этот: FontStorage.com

Вот его основные преимущества по сравнению с другими ресурсами:

• Большой выбор шрифтов для сайта
• Большинство шрифтов представлены сразу в нескольких форматах
• Есть наглядный предпросмотр с возможностью изменять размер и выбирать варианты текста для разных языков.
  
• Наличие сортировки по типу шрифта, тематике и поддерживаемым языкам (алфавитам), что немаловажно!
  

Как видите, в подключении шрифта в CSS нет ничего сложно. Используя показанный в этой статье способ, вы можете подключить к своему сайту любой понравившийся шрифт, и тем самым сделать его более интересным и оригинальным.

Не забывайте делиться статьей в социальных сетях и оставлять свои комментарии. Это поможет мне понять, интересует ли вас данная тема и стоит ли делать подобные статьи.

А на сегодня у меня все. Желаю вам успехов в создании сайтов!

До встречи в следующих статьях!

С уважением Юлия Гусарь