Как установить шрифт на сайт ?

подключить шрифт css

Часто при верстке psd макета необходимо подключать разные нестандартные шрифты в css файле. Такие как Open Sans, Roboto, Myriad и другие. И в этой статье я Вам покажу, как сделать это.

Первым делом у Вас должен быть сам файл шрифта. Его можно скачать с сайта fonts4web.ru . Заходим на этот сайт и в поле поиска вводим название шрифта, которого хотим установить на свой сайт. Я поищу шрифт Open Sans.

поиск шрифта open sans на сайте fonts4web.ru

После ввода названия сразу же появляются результаты поиска.

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

шрифт open sans

После нажатия на указанную область откроется страница в новой вкладке, на которой сможем проверить шрифт в действии.

Подбираем настройки шрифта и ниже вводим тестовый текст, для проверки.

проверка шрифта open sans

Выше редактора для проверки шрифта, мягким красным цветом перечислены начертания, которые входят в состав архива со шрифтом.

На этой же странице Вы сможете прочитать, как установить шрифт в ОС, но нас сейчас интересует подключение шрифта в css.

Идем в самом внизу страницы и видим зеленую кнопочку с названием Скачать шрифт +название выбранного шрифта. В моем случае данная кнопка выглядит так:

кнопка скачать шрифт open sans

Распаковываем скачанный архив и в корневую папку сайта, создаем папку с именем fonts куда перемещаем полученную папку.

Внутри данной папки находятся папки с начертаниями шрифта. Для примера откроем папку начертания OpenSansBold и видим, что здесь находятся 3 файла с расширениями ttf, eot и woff.

Формат ttf (True Type) — данный формат разработан фирмой Apple еще в 1980- годах и его понимает каждый современный браузер.

Формат eot (Embedded OpenType) — Разработан компанией Microsoft. Он предназначен для старых браузеров Internet explorer(сокращенно IE) ниже 9 версии.

Формат woff (Web Open Font Format) — Этот формат был разработан в 2009 году и предназначен именно для web страниц.

Теперь откроим файл стилей нашего сайта, и в самом начале этого файла, с помощью эт-правила @font-face добавляем наш любимый шрифт:

@font-face{
    font-family: OpenSansBold; /* Название загруженного шрифта. Это название будем указать в значение свойства font-family у желаемых элементов */
    src: url("../fonts/OpenSans/OpenSansBold/OpenSansBold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/OpenSans/OpenSansBold/OpenSansBold.woff") format("woff"),
    url("../fonts/OpenSans/OpenSansBold/OpenSansBold.ttf") format("truetype");
}

body{
    font-family: OpenSansBold;
}

Разберем более детально каждую строчку написанного кода.

Как Вы уже поняли, шрифт подключается с помощью, так называемой эт правилом @font-face. Внутри фигурных скобок через свойство font-family указывается название подключаемого шрифта. Здесь может быть любое удобное для Вас название.

Имя шрифта необходимо написать в кавычки только в случае если оно состоит из двух или больше слов.

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

Указанное название нужно будет написать в значение свойства font-family у тех элементов, которым хотим задать подключенный шрифт.

Идем дальше. Как вы догадались, с помощью свойства src, мы указываем путь к шрифту, которого хотим добавить на сайт.

У большинства из Вас возник такой вопрос, зачем нужно подключать столько форматов eot, woff, ttf ?

Это делается для кроссбраузерной поддержки подключаемого шрифта.

Для наглядности представлю таблицу поддержки шрифтов разными браузерами.

Формат шрифта Браузеры которые его поддерживают
TTF
  • IE 9.0 +
  • Chrome 4.0 +
  • Opera 10.0 +
  • Safari 3.1 +
  • Firefox 3.5 +
  • Android 2.2 +
EOT
  • IE 5.0 - 8.0
WOFF
  • IE 9.0 +
  • Chrome 5.0 +
  • Firefox 3.6 +
SVG
  • Chrome 1.0 +
  • Opera 9.0 +
  • Safari 3.1 +
  • IOS 1.0 +

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

Порядок подключения нестандартных шрифтов

Первым подключается формат шрифта eot, с указанием параметра #iefix после имени файла. Знак вопроса лишь указывает, что после него будет передан какой не будь параметр.

"../fonts/OpenSans/OpenSansBold/OpenSansBold.eot?#iefix"

Это строка предназначена для браузера IE, версии 5-8. Параметр #iefix передаем для того чтобы избежать потенциальный баг в этих версиях. Баг заключается в том, что эти версии браузера IE могут криво обработать src, что впоследствии приведет к некорректному отображению шрифта.

Есть еще такой вариант, можно перенести строку с параметром #iefix вместе с правилом format("embedded-opentype"), в отдельный файл css, который будем подключать в html или php файле с помощью условных комментариев. Этот файл будет, выглядит так:

@font-face{
    font-family: OpenSansBold; /* Название шрифта. */
    src: url("../fonts/OpenSans/OpenSansBold/OpenSansBold.eot?#iefix") format("embedded-opentype");
}

После этого в правиле @font-face, в основном файле css будет на один путь меньше.

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

Подключение своих шрифтов только для современных браузеров.

Если Вас волнует отображение сайта только в современных браузерах, то в таком случае можете подключать лишь два формата, а именно формат woff и ttf.

Формат woff самый легкий, потому что он сжатый. Весит он всего лишь 28.1 kb и это главный плюс данного формата. Остальные шрифты весят почти вдвое больше, eot весит 44kb, а ttf 43.9kb. Но, к сожалению его, не понимают браузеры Opera, Safari и Android. Поэтому нужно подключить и универсальный формат ttf которого по сравнению с woff понимают все браузеры. Его поддерживает даже браузеры из ОС Android, начиная с версии 2.2.

@font-face{
    font-family: OpenSansBold; /* Название шрифта. */
    src: url("../fonts/OpenSans/OpenSansBold/OpenSansBold.woff") format("woff"),
    url("../fonts/OpenSans/OpenSansBold/OpenSansBold.ttf") format("truetype");
}

Указание формата. Строчка format("тип формата шрифта")

Для чего нужно написать декларацию format после каждого подключенного формата шрифта ?

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

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

Шрифты для браузеров на ОС IOS

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

Если Вы не знаете, как подключить файл стилей к html странице то рекомендую прочитать статью Подключение css к html

Отображение страницы сайта после подключения шрифта Open Sans.

Для наглядности, внутри тега body я добавил заголовок h1 с названием шрифта и параграф с текстом. Заголовок h1 выровнял по центру страницы, задав ему в css файл свойство text-align со значением center.

h1{
    text-align: center;
}

Все готово. Открываем страницу в браузере и смотрим на результат.

Вид страницы до подключения шрифта:

вид страницы до подключения шрифта

Вид страницы после подключения шрифта:

Шрифт Open Sans

Проверка шрифта онлайн, сразу на страницу сайта

Также на сайте fonts4web.ru есть такая возможность как проверка шрифта прямо на Вашем сайте, без его подключения.

И так, заходим на этот сайт, вводим название нашего любимого шрифта, например Open Sans и переходим на детальную страницу данного шрифта.

На этой странице есть синее текстовое поле, куда необходимо ввести URL адрес страницы. Вот как выглядит данное поле на сайте сейчас:

проверка шрифта онлайн

Вводим адрес страницы, на которой хотим применить данный шрифт и нажимаем на кнопку открыть. В новой вкладке откроется указанная страница, где увидите, что текущий шрифт поменялся на выбранный шрифт. Я ввел название моего сайта sozdatisite.ru.

Смотрим на предварительный результат:

предварительное применение шрифта на сайте

Посмотрели хорошенько и уже можете решить, подключить данный шрифт к сайту или нет.

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

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: %date%