Поддержать проект - жмяк

Как подключить шрифт к сайту html +css

4386
()

Одна из первых задач, которая встает перед вебмастером при создании нового проекта - подбор и подключение необходимых шрифтов к сайту. Шрифт можно подключить как с помощью html и css, так и с помощью различных сервисов, например, GoogleFonts.  Так же есть различные ресурсы, которые помогут быстро подобрать шрифты для вашего сайта:

Непосредственно подключить шрифты на сайт можно тремя способами:

1Используя сервис GoogleFonts (https://fonts.google.com/)
Переходим на сервис, выбираем нужный шрифт, после чего откроется такое окно (рис.1):

Рис. 1 Googlefonts

Нажимаем на кнопку "select this style" (выделена красным), после чего справа появится всплывающее окно (рис. 2):

Подключить шрифт googlefonts
Рис 2.

Если окно не появилось, то нажимаем на пиктограмму из трех квадратов и плюса (подчеркнута красным).

Выбираем вкладку Embed (подчеркнута красным) и копируем код для вставки на сайт (подсв. синим(рис.3)

Рис.3

После того, как код скопирован, вставляем его в хедер вашего сайта между тегами <head></head>.

Или переключаемся на вкладку @import (чуть правее) и копируем код из этого же окошка, но его вставляем в файл style.css вашего сайта.

После того, как шрифт подключен, в css - файле у нужного элемента прописывается следующее свойство ( на примере заголовка h1):

h1 {font-family: 'Open Sans', sans-serif}


2  Через сервис https://www.fonts-online.ru/  или  GoogleFonts скачиваем шрифт на сайт, далее загружаем его через файловый менеджер хостинга в папку fonts вашего сайта. Если у вас такой папки нет, то ее необходимо создать. После того, как папка создана и шрифт загружен, необходимо прописать путь к нему в хедере вашего сайта (на примере wordpress) между тегами  <head></head> .

<link href="https://ваш-сайт.ру/wp-content/themes/ваша-тема/fonts/opensans.ttf" rel="stylesheet">

В WordPress эта строчка вносится в файл header.php.

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

Проверить поддержку шрифтов браузером можно через этот сервис. Для этого необходимо ввести в поисковую строку формат шрифта (otf например).

Чтобы шрифт корректно отображали все браузеры, рекомендуется одновременно подключать несколько форматов (otf, svg, woff).

3 Этот способ более предпочтителен и отличается от предыдущего только тем, что шрифт подключается не через хедер, а через css.  Для этого в файле style.css вашего сайта прописывается такой код:

@font-face{
font-family: 'open sans';
src: url('fonts/opensans.otf');}

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

@font-face{
font-family: 'open sans';
src: url('../путь-до-папки/fonts/opensans.otf');}
Вариант подключения шрифта через css самый практичный из всех вышеперечисленных, т. к. здесь же можно задать жирность шрифта, стиль и другие свойства. Например:
@font-face{
font-family: 'open sans';
src: url('fonts/opensans.otf');
font-weight: 400; /*задаем жирность шрифта*/
font-style: normal; /*задаем стиль*/
}

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

Оцените!

Средняя оценка / 5. Количество оценок:

Оценок пока нет. Поставьте оценку первым!

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code