Свой уникальный шрифт на сайте, под управлением WordPress, это не просто красиво, но и позволит вам заявить о своем сайте, как о некоем авторском ресурсе. Скачав новый шрифт и установив его на сайт, вы добьетесь узнаваемости, благодаря тому, что ваш ресурс будет гармонично смотреться и запоминаться. Но не забывайте, что подобранный шрифт должен легко читаться, так как, прежде всего, к вам на сайт заходят не для того, чтобы посмотреть, какой у вас замечательный шрифт или картинки, а для того, чтобы получить информацию. А если хотите лучше разбираться в этом направлении, можно пройти курсы по графическому дизайну.
Как подключить шрифт к сайту на WordPress?
Для начала скачаем какой-нибудь интересный шрифт, я скачала вот такой расписной под названием Cordeballet.
Далее необходимо добавить свой шрифт на сайт. Сделать это очень просто, и для этого нужно:
- Залить шрифт на хостинг в папку с шаблоном сайта и сохранить его там. Для этого желательно создать там отдельную папку fonts. В эту папку необходимо установить шрифт формата .ttf. Например, этот файл со шрифтом называется Cordeballet.ttf
- После этого копируем адрес, где находится наш шрифт, например, http://dumajkak.ru/wp-content/themes/NazvanieShablona/fonts/Cordeballet.ttf
- Заходим в админку сайта, для которого будем использовать скачанный шрифт. И переходим во вкладку Редактор -> Таблица стилей (style.css). Здесь вставляем такой код (в любое место):
1@font-face {font-family:'Cordeballet';src: url('http://dumajkak.ru/wp-content/themes/NazvanieShablona/fonts/Cordeballet.ttf');}
Как можно заметить, в этом коде используется название нашего шрифта ‘Cordeballet’, а также адрес, откуда его брать (где шрифт находится на хостинге)
‘http://dumajkak.ru/wp-content/themes/NazvanieShablona/fonts/Cordeballet.ttf’ - После этого остается лишь добавить наш шрифт в css к нужным нам тегам. Делается это все, также в Таблице стилей (style.css). К примеру, если нам нужно поменять все шрифты на сайте, то можем просто добавить новый шрифт в тег body:
|
1
|
body {font-family: Cordeballet, Arial, Helvetica, Sans-serif;}
|
Если нам нужно просто подключить шрифт в css лишь в названии к Сайдбару, то ищем пункт sidebar и пробуем добавить новый шрифт туда, к примеру вот:
|
1
|
.sidebar h2 {font-size: 16px; font-family: Cordeballet, Arial, Helvetica, Sans-serif; font-weight: normal;}
|
Важно!
Почему после названия нашего шрифта мы пишем еще другие названия шрифтов?
Свойство 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 — Капитель шрифта (все буквы прописные или строчные).
Полезный Лайфхак
Если вам нужно прописать лишь один абзац в тексте таким шрифтом (ну, например, выделить цитату), то вы можете указать данный шрифт прямо в тексте, например:
|
1
|
<p style="font-family:'Cordeballet';font-size:2em;color:green;">Полезный Лайфхак</p>
|
При этом не забудьте, что 3 пункт обязателен во всех случаях, то есть подключение данного кода шрифта в таблицу стилей
|
1
|
@font-face {font-family:'Название шрифта';src: url('Путь к шрифту');}
|
На этом все! Всем приятных экспериментов!
Все получилось легко и просто. Спасибо за инфу
Спасибо) Все просто и понятно +