Меню Рубрики

Установка ttf шрифта на сайте

Как подключить шрифт на сайт: 3 разных способа + готовый CSS шаблон

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Установка продувки металла аргоном

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

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

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

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

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

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

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

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

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

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

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

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

Обозначение начертаний шрифтов — нормальный (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 файла следующую запись:

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

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

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

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

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

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

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

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

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

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

Читайте также:  Установка датчика температуры масла на трактор юмз

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

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

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

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

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

источник

Установка TTF-шрифтов на компьютер

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

Установка TTF-шрифта в Windows

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

Этап 1: Поиск и скачивание TTF-шрифта

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

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

Этап 2: Установка TTF-шрифта

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

    Откройте папку со шрифтом и найдите в ней файл расширения .ttf.

Нажмите по нему правой кнопкой мыши и выберите пункт «Установить».

Дождитесь окончания процесса. Обычно это занимает пару секунд.

Зайдите в программу или системные настройки Windows (в зависимости от того, где вы хотите пользоваться этим шрифтом) и найдите установленный файл.

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

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

    Перейдите по пути C:\Windows\Fonts .

  • В новом окне откройте ту папку, где хранятся TTF-шрифты, которые требуется интегрировать в систему.
  • Выделите их и перетащите в папку «Fonts».

    Начнется последовательная автоматическая инсталляция, дождитесь ее окончания.

    Как и в предыдущем способе, для обнаружения шрифтов открытое приложение нужно будет перезапустить.

    Точно таким же образом можно устанавливать шрифты и других расширений, например, OTF. Удалять варианты, которые вам не понравились, очень просто. Для этого зайдите в C:\Windows\Fonts , отыщите название шрифта, кликните по нему правой кнопкой мыши и выберите «Удалить».

    Подтвердите свои действия нажатием на «Да».

    Теперь вы знаете, как устанавливать и применять TTF-шрифты в Windows и отдельных программах.

    Читайте также:  Установка блока с obd

    Отблагодарите автора, поделитесь статьей в социальных сетях.

    источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Также можно воспользоваться сервисом fonts4web для подключения шрифтов:

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

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

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

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

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

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

    1. Заходим Настройки—>Шаблон—>template.php;
    2. Перед закрывающим тегом head вставляем ссылку сгенерированную гуглом;
    3. Затем в файле стилей задаём новый шрифт к нужному элементу:

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

    источник

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

    Adblock
    detector