Как установить шрифт на сайт и подключить его в css правильно?

как установить шрифт на сайт

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

Как подключить шрифт к сайту на WordPress?

Для начала скачаем какой-нибудь интересный шрифт, я скачала вот такой расписной под названием Cordeballet

подключить шрифт css

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

  1. Залить шрифт на хостинг в папку с шаблоном сайта и сохранить его там. Для этого желательно создать там отдельную папку fonts. В эту папку необходимо установить шрифт формата .ttf. Например, этот файл со шрифтом называется Cordeballet.ttf
  2. После этого копируем адрес, где находится наш шрифт, например, http://dumajkak.ru/wp-content/themes/NazvanieShablona/fonts/Cordeballet.ttf
  3. Заходим в админку сайта, для которого будем использовать скачанный шрифт. И переходим во вкладку Редактор -> Таблица стилей (style.css). Здесь вставляем такой код (в любое место):

    Как можно заметить, в этом коде используется название нашего шрифта ‘Cordeballet’, а также адрес, откуда его брать (где шрифт находится на хостинге)
    ‘http://dumajkak.ru/wp-content/themes/NazvanieShablona/fonts/Cordeballet.ttf’ 
  4. После этого остается лишь добавить наш шрифт в css к нужным нам тегам. Делается это все, также в Таблице стилей (style.css). К примеру, если нам нужно поменять все шрифты на сайте, то можем просто добавить новый шрифт в тег body:

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

Важно!

Почему после названия нашего шрифта мы пишем еще другие названия шрифтов?

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

font-family: Cordeballet, Arial, Helvetica, Sans-serif;

На самом деле, можно это и не делать. Поскольку новые браузеры, если не находят подходящий шрифт, то сами подбирают стандартный. Однако многие люди до сих пор используют старые браузеры и в случае пропажи или непрочтения нашего шрифта Cordeballet (или любого другого, который вы скачаете), браузер будет автоматически подключать шрифт в css следующий по списку. Вот, например, Arial или какой-нибудь подходящий их семейства Sans-serif.

 

Какие еще свойства можно применять к шрифтам в style.css:

color — Цвет шрифта.

font-family — Семейство шрифтов (название).

font-size — Размер шрифта.

font-weight — Вес шрифта (его жирность).

font-style — Стиль шрифта.

font-variant — Капитель шрифта (все буквы прописные или строчные).

 

Полезный Лайфхак

Если вам нужно прописать лишь один абзац в тексте таким шрифтом (ну, например, выделить цитату), то вы можете указать данный шрифт прямо в тексте, например:

При этом не забудьте, что 3 пункт обязателен во всех случаях, то есть подключение данного кода шрифта в таблицу стилей

На этом все! Всем приятных экспериментов!

Вы можете оставить комментарий или ссылку на статью на вашем сайте.

Поделиться:

1 Комментарий “Как установить шрифт на сайт и подключить его в css правильно?”

  1. Игорь:

    Все получилось легко и просто. Спасибо за инфу

Комментировать статью

Яндекс.Метрика