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

Смотрите сами:

разные шрифты

Одни шрифты выглядят более убедительно, другие - более интригующе.

Но как подключить любые шрифты к сайту и применять их где захочется?

В этой статье я покажу вам 3 способа, с помощью которых вы сможете подключить любые, самые разнообразные и нестандартные шрифты на свой сайт. И неважно, каким CMS вы пользуетесь: WordPress, Joomla, Drupal или Open Cart.

Эксклюзивный бонус: Нажмите здесь чтобы получить ПОШАГОВЫЙ видеоурок по подключению шрифтов на сайт (нажмите чтобы скачать).

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

Вы узнаете:

  • Как установить любые шрифты за 2 минуты (WordPress) >>
  • Как бесплатно подключить шрифты с сервиса Google Fonts >>
  • Как гибко подключить шрифты в HTML с помощью CSS >>
  • Где бесплатно взять веб-шрифты для сайта >>
  • Особенности подключения шрифтов для разных CMS >>

Если у вас сайт на Wordress, читайте способ №1, он - самый простой. Если вы разбираетесь в CSS - можете сразу перейти ко второму или третьему способу.

Способ №1. Быстрое подключение шрифтов к сайту на WordPress ( cложность: ⭐ ⭐ ⭐ )

Если на ваш сайт установлена премиальная тема оформления - вы можете подключить шрифты за 2 минуты.

Например:

Вы хотите изменить шрифт заголовков своих статей. Для этого:

1. В админ-панели перейдите в раздел Theme Options. В зависимости от вашего шаблона этот раздел может называться немного по-другому, но смысл всегда один - "настройки темы".

2. Перейдите в раздел Typography (типография).

3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):

подключение шрифтов к WordPress

4. Нажмите на "Сохранить изменения".

Если ваш сайт работает на другом движке, или ваша тема оформления не предусматривает таких настроек, переходите к следующему способу.

Способ №2. Используйте всю силу Google Fonts ( cложность: ⭐ ⭐ ⭐ ⭐ )

Вы когда-нибудь слышали про Google Fonts? Если вкратце - это сервис, с помощью которого вы можете подключить более 700 шрифтов на свой сайт.

Шаг 1. Перейдите на официальный сайта сервиса.

Шаг 2. Найдите в коллекции Гугл шрифтов те, которые вам подходят. В правом меню можно сузить круг задав язык, начертание и популярность шрифта:

фильтрация шрифтов в google fonts

Для того, чтобы сервис показал шрифты с поддержкой русского языка в пункте Languages выберите Cyrillic.

Шаг 3. Представим, вам понравился шрифт Roboto. Нажмите на иконку "+":

Вы можете добавить любые шрифты нажимая на значок "+".

Шаг 4. После этого нужно развернуть корзину с выбранными шрифтами:

Перейдя во вкладку Customize вы можете выбрать начертания и язык. Касательно начертаний, советую выбрать стандартный комплект - нормальный (400), курсивный (400 italic), жирный (700) и курсивно-жирный (bold 700 italic):

выбор начертания шрифтов в google fonts

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

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

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

Шаг 5. Вернитесь в раздел Embed и выберите владку @IMPORT. Далее, скопируйте строку кода, содержащую "@import" и вставьте на первую строчку CSS файла вашего сайта:

код-для-вставки-в-CSS

Если у вас сайт на WordPress, CSS файл скорее всего находится здесь: wp_content/themes/'вашатема'/css/... В папке CSS скорее всего будет файл Fonts, куда и нужно перенести код вставки от Google:

код в css файле

Не важно на каком CMS работает ваш сайт, просто вставьте код, и все будет 👌

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

Определять шрифт для тех или иных элементов сайта вы можете в том же CSS файле.

Например:

Для придания шрифта Roboto всем абзацам я напишу следующее: p { font-family: Roboto;}

Способ №3. Как подключить шрифты в HTML с помощью CSS ( cложность: ⭐ ⭐ ⭐ ⭐ ⭐ )

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

Где взять веб-шрифты для сайта

А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?

Или...

Подключить шрифты с бесплатной лицензией. Проще всего найти их с помощью сервиса Fontsquirrel, что мы и сделаем.

Шаг 1. Перейдите на официальный сайт сервиса

Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.

Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.

Например, если есть 4 начертания, будет написано 4 Styles:

выбор-шрифта-fontsquirrel

Обозначение начертаний шрифтов - нормальный (400/regular), курсивный (italic), жирный (700/bold), жирный курсивный (700 italic).

Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.

Шаг 6. Переходим в раздел Webfont Kit. Выбираем все форматы шрифтов и жмем на Download @FONT-FACE KIT. Если доступно всего 1-2 формата, не страшно.

Для подключения шрифтов используем @Font-face

Через директиву @font-face вы можете подключить как один, так и несколько шрифтов к своему сайту. Но у данного способа есть свои плюсы и минусы.

Плюсы:

  • Через CSS вы можете подключать шрифты любых форматов: ttf, otf, woff, svg.
  • Файлы шрифтов будут находится на вашем сервере - вы не будете зависеть от сторонних сервисов.

Минусы:

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

Но...

Вы можете просто скопировать мой готовый код и где нужно указать свои значения.

Шаг 1. Перенесите файлы скачанных шрифтов на ваш сайт. Это можно сделать через панель управления вашего хостинга или через FTP.

Я предлагаю создать папку fonts в той же директории, где находится ваш CSS файл. Перенесите все файлы шрифтов в эту папку.

Шаг 2. Пропишите в самом начале CSS файла следующую запись:

@font-face{
font-family: 'MyWebFont';
src: url('../fonts/WebFont.eot');
src: url('../fonts/WebFont.eot?iefix') format('eot'),
url('../fonts/WebFont.woff') format('woff'),
url('../fonts/WebFont.ttf') format('truetype'),
url('../fonts/WebFont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}

Где MyWebFont - это название шрифта, а значение свойства src (данные в скобках в кавычках) - их месторасположение (относительные ссылки). Нам нужно указать каждое начертание отдельно.

Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.

Шаг 3. При подключении курсивного начертания, пропишите следующее:

@font-face{
font-family: 'MyWebFont';
src: url('../fonts/WebFont-Italic.eot');
src: url('../fonts/WebFont-Italic.eot?iefix') format('eot'),
url('../fonts/WebFont-Italic.woff') format('woff'),
url('../fonts/WebFont-Italic.ttf') format('truetype'),
url('../fonts/WebFont-Italic.svg#webfont') format('svg');
font-weight: normal;
font-style: italic;
}

Где все то же самое, только свойству font-style мы придали значение italic.

Шаг 4. Для подключения жирного начертания, добавьте следующий код:

@font-face{
font-family: 'MyWebFont';
src: url('../fonts/WebFont-Bold.eot');
src: url('../fonts/WebFont-Bold.eot?iefix') format('eot'),
url('../fonts/WebFont-Bold.woff') format('woff'),
url('../fonts/WebFont-Bold.ttf') format('truetype'),
url('../fonts/WebFont-Bold.svg#webfont') format('svg');
font-weight: bold;
font-style: normal;
}

Где свойству font-weight мы задали значение bold.

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

Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:

@font-face{
font-family: 'MyWebFont';
src: url('../fonts/WebFont-Italic-Bold.eot');
src: url('../fonts/WebFont-Italic-Bold.eot?iefix') format('eot'),
url('../fonts/WebFont-Italic-Bold.woff') format('woff'),
url('../fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('../fonts/WebFont-Italic-Bold.svg#webfont') format('svg');
font-weight: bold;
font-style: italic;
}

Ну вот и все :) Только что вы подключили 4 начертания шрифта на свой сайт.

Но есть одна ремарка - данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало.

Как подключать шрифты для сайтов на разных CMS

Неважно, на каком движке ваш сайт (WordPress, Joomla, Drupal, Opencart) - если у вас есть доступ к CSS файлу, вы можете подключить шрифты как через Google Fonts, так и закачав их на свой сервер через Fontsquirrel.

Ну вот и все. Если вы считаете, что эта статья может быть полезна другим вебмастерам - поделитесь ею в социальных сетях.

А также:

[popup_trigger id="3874" tag="span"]Подписывайтесь на мою рассылку[/popup_trigger], чтобы не пропустить полезные и интересные публикации на блоге.

Кликните по ссылке ниже чтобы получить бесплатный доступ к ПОШАГОВОМУ видеоуроку по подключению шрифтов.

подключение шрифтов

13 Comments

  1. "Но есть одна ремарка — данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало." - а все по тому что не нужно указывать начертание в правиле @font-face. Там везде должно быть font-weight: normal; font-style: normal;
    А шрифтам нужно указывать дополнительный префикс указывающий начертание в названии. А потом использовать это название в правиле font-family.

  2. Пока читал, вылезло что-то сверху и ещё два всплывающих окна. Жесть.

    • Как посмотреть. Судя по всему вы очень чувствительны. Приношу прощения за неудобства.

  3. Подскажите, пожалуйста!
    WordPress стоит на Wampserver на локальной машине.
    Где допущена ошибка в указании пути к шрифту?

    @font-face {
    font-family: test-my-font;
    src: url('https://localhost/mysite/wp-content/themes/bb-ecommerce-store/fonts/KobzarKS_v1-020.ttf');
    }
    @font-face {
    font-family: test-my-font !important;
    }

    • Ольга, ошибка скорее всего в том, что название шрифта не взято в кавычки. Когда название шрифта состоит из более чем 1 слова, нужно брать в кавычки.

  4. Я пробовал подключить и через google fonts,но там нет этого шрифта шрифт называется [CenturyGothic],подумав что это платный шрифт я решил поискать заменитель к этому шрифту он называется futura,но и он не подключился,я понял в чём ошибка,я не правильно указываю путь,у меня маленькая проблема с этим,всё что я сделал: cкачал шрифт Futura с сайта формата .ttf я залил этот шрифт в папку в которой я создаю сайт и приписал значение в программе:
    @font-face {
    font-family: 'futura';
    src: url('../AG_Futura Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }
    Я и другой способ пробовал но он тоже не сработал((

  5. когда cдохнет Internet Explorer!!!

  6. А чем отличается woff от eot? Woff вроде как более новый формат я так понимаю и предпочтительней использовать его? Или eot тоже обязательно подключать? Ведь это увеличит скорость загрузки страницы.

  7. Добрый день! Если шрифт иконочный, например, IcoMoon-Free.ttf, как потом вставить нужный символ в html?

  8. Спасибо.

  9. Пробовал но не получилось

  10. А если у меня есть только файл .otf ?

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

пять × пять =

Закрыть