0

Ваш заказ

Лого moguta.ru

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

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

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

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

В корневой папке сайта создаём папку fonts и копируем туда наш Raleway.ttf;

В самом низу файла стилей style.css прописываем правило:

@font-face {
  // название шрифта(чтобы не запутаться лучше указать название папки со шрифтом) 
  font-family: "RalewayRegular"; 
  // адрес шрифта и тип 
  src: url("../fonts/RalewayRegular.ttf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 


А также в файле стилей задаём правило для всех заголовков:


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. Через хостинг загрузить необходимый шрифт в папку /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 и не только. Мы с радостью ответим на все ваши вопросы в группе или комментариях.

Сайт за 2 минуты!

Без программистов и дизайнеров, на конструкторе Moguta.CLOUD от 1 850р. в месяц

НАЧАТЬ УСТАНОВКУ ONLINE 14 дней бесплатно!

Доступен перенос сайта на ваш хостинг, при покупке редакции Moguta.CMS «Гипермаркет» с сохранением всех настроек, контента и даже позиций в поисковой выдаче!

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

Имя:
E-mail:
Прикрепить изображения
Получать уведомления о новых комментариях:
  • Т. 13.02.2023 20:53
    Этот способ не работает при попытке подключать шрифты для сайтов/приложений на андроиде. Андроиду нужны полные ссылки!
  • эдгар 19.04.2022 15:52
    дизлайк
    • Денис 20.04.2022 11:46
      Здравствуйте. Подскажите, у вас возникли проблемы с подключением шрифтов?
    • rOnanjr2 06.01.2023 17:01
      За шо диз, лошара? Все работает.
  • Дмитрий 25.03.2019 16:48
    А шрифты из интернета, да ещё, чтобы у всех они отображались правильно, как?
    • Андрей 17.04.2019 17:24
      Можно более подробный вопрос.
  • Владимир 15.03.2019 17:31
    Когда подключаются внешние шрифты, страница при загрузке мигает. Как можно этого избежать? Спасибо.
  • jstudio 19.12.2018 00:02
    Нужно подключить только один формат woff и все https://caniuse.com/#search=woff
  • Томас 20.08.2018 16:33
    СПС люблю вас
  • Илья 16.10.2017 17:07
    Супер, спасибо.