МЕНЮ
Смотреть демо
0

Ваш заказ

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

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

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

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках(h1) нашего сайта. Для этого выполняем следующие действия:

  1. В корневой папке сайта создаём папку «fonts» и копируем туда наш Raleway.ttf;
  2. В самом низу файла стилей(style.css) прописываем правило:
    @font-face {
    // название шрифта(чтобы не запутаться лучше указать название папки со шрифтом) 
    font-family: "RalewayRegular"; 
    // адрес шрифта и тип 
    src: url("../fonts/RalewayRegular.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: normal; 
    } 
  3. А также в файле стилей задаём правило для всех заголовков:
 h1{
font-family: "RalewayRegular";
}

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


Если вы хотите подключить несколько шрифтов(или их начертаний), то просто добавьте их под предыдущим:

@font-face {
font-family: "RalewayRegular";  
src: url("../fonts/RalewayRegular.ttf") format("truetype"); 
font-style: normal; 
font-weight: normal;
 }
@font-face{
 font-family: "RalewayBold";
 src: url("../fonts/RalewayBold.ttf") format("truetype");
 font-style: normal; 
font-weight: normal; 
}


Вы могли заметить, что есть разные форматы шрифтов - .ttf, .woff, .eot, .svg и др. Еще существует формат для современных браузеров .woff2 , но о нем мы расскажем в одной из следующих статей. Обычно каждый шрифт подключается сразу в 3х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в т.ч. и старых. Выглядит это так:

@font-face {
 font-family: "RalewayRegular"; 
src: url("../fonts/RalewayRegular/RalewayRegular.eot"); 
src: url("../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format("embedded-opentype"),
url("../fonts/RalewayRegular/RalewayRegular.woff") format("woff"), 
url("../fonts/RalewayRegular/RalewayRegular.ttf") format("truetype"); 
font-style: normal; 
font-weight: normal; 
}

Здесь следует обратить внимание на порядок подключения — это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

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


Как подключить шрифт с помощью различных сервисов  

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

  2. Скачиваем архив и добавляем его в папку fonts;
    Как подключить шрифт на сайт в CSS с помощью fonts4web
  3. Копируем уже готовый CSS-код для файла style.css;
    Как подключить шрифт на сайт в CSS с помощью fonts4web

Готово!


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

Используя сервис Google Fonts:

  1. Заходим на сайт https://fonts.google.com;
  2. Находим нужный шрифт(или несколько):
    Как подключить шрифт на сайт в CSS с помощью Google Fonts
  3. Нажимаем на красный круг в правом верхнем углу в блоке шрифта;
  4. Внизу нажимаем на появившееся чёрное поле:
    Как подключить шрифт на сайт в CSS с помощью Google Fonts
  5. При желании кастомизируем шрифт;
  6. Копируем ссылку и вставляем ее в тег head:
    Как подключить шрифт на сайт в CSS с помощью Google Fonts



Как подключить шрифт к шаблону Moguta CMS

  1. Через хостинг загрузить необходимый шрифт в папку fonts (mg-templates/mg-default/fonts);
  2. Через административную панель открыть файл стилей;
  3. Прописать в самом верху новый шрифт;
  4. Ниже в файле стилей найти интересующий нас элемент и задать(изменить) свойство font-family: *название нового шрифта*;
    Как подключить шрифт на сайт в CSS Moguta CMS
 


Как добавить ссылку с Google fonts в шаблон Moguta CMS

  1. Заходим Настройки — Шаблон — template.php;
  2. Перед закрывающим тегом head вставляем ссылку сгенерированную гуглом;
  3. Затем в файле стилей задаём новый шрифт к нужному элементу:
    Как подключить шрифт на сайт в CSS Moguta CMS
Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы в группе или комментариях:)

Комментарии (3)

Имя:
E-mail:
Прикрепить изображения

Получать уведомления о новых комментариях:
  • jstudio 19.12.2018 00:02
    Нужно подключить только один формат woff и все https://caniuse.com/#search=woff
  • Томас 20.08.2018 16:33
    СПС люблю вас
  • Илья 16.10.2017 17:07
    Супер, спасибо.