65+ лучших бесплатных русских шрифтов для скачивания
Кремлевский курьер II
подробнее
Русская линия
подробнее
Кремлевский старец
подробнее
Kremlin Empire
Дополнительная информация
AGIT Prop
Подробнее
Spoutnik
Подробнее
СТАЛИН ОДИН
СТАЛИН ONE OF OT AR
Коля
подробнее
Кремлевский самовар
подробнее
Корзина данных
подробнее
Nyet
more info
Kremlin Grand Duke
more info
Gagarin
more info
Alghorie Std
more info
LL Lisa
more info
Пропаганда
подробнее
Вадим Гигант
подробнее
Капиталист
подробнее
7 Кремль Дума
more info
Eurocentric
more info
Konspiracy Theory
more info
Kremlin Georgian
more info
Laika
more info
Russian
more info
Кепки Csar Parade
подробнее
Imperial One
подробнее
Metro
more info
VKB KonQa
more info
October Guard
more info
Kyrilla
more info
Back In The USSR DL
more info
Кремлевский Александр
подробнее
Советский
подробнее
Распад ГУЛАГа
подробнее
Красное 9 октября0021
Шрифты Red October из коллекции бесплатных русских шрифтов.
more info
Alghorie Bald
more info
Molot
more info
10 Cent Soviet Font
more info
Cyberia Font
more info
Aver шрифт
подробнее
Шрифт JLS Data Gothic
Шрифт JLS Data Gothic в топе русских шрифтов.
Дополнительная информация
H74 Ocelot Piss Font
Подробнее
ХАРИЧЕСКИЙ ФОНТ
Подробнее
9007
Bicubik Font
. в Царапины Информация. Также регулярный участник других крупных технологических онлайн-платформ. Специалист по безопасности днем и писатель ночью, он делает все возможное, чтобы привить свои знания о технологиях, предоставляя вдохновляющие и меняющие жизнь ресурсы через свои письма,
Еще сообщения — Сайт
Как легко добавить пользовательские шрифты на ваш веб-сайт WordPress
Подобно цветам, изображениям и другим структурным элементам, типографика является важной частью веб-дизайна.
Он передает бренд и индивидуальность, оживляет контент и в целом может значительно улучшить эстетику веб-сайта WordPress (за исключением Comic Sans, который я настоятельно рекомендую не использовать).
К счастью, в последние годы бесплатные шрифты и наборы для печати стали более доступными. Дизайнеры и владельцы веб-сайтов теперь могут использовать множество ресурсов, чтобы добавить красивый шрифт в свое присутствие в Интернете.
В этой статье мы рассмотрим два способа получить пользовательские шрифты на вашем веб-сайте WordPress с помощью двух сервисов Google Fonts и Adobe Edge Web Fonts. Оба являются большими библиотеками веб-шрифтов, которые легко доступны для интеграции на ваш сайт.
Однако, прежде чем мы углубимся в то, как это сделать, давайте быстро обсудим, почему типографика важна для вашего сайта.
Почему следует использовать пользовательские шрифты
Правильное использование типографики в веб-дизайне само по себе является искусством. Дело не только в выборе правильного шрифта, но и в толщине, наклоне и размере.
С другой стороны, если все сделано правильно, типографика может сильно изменить внешний вид вашего сайта и показать, чем вы занимаетесь. Консервативный бизнесмен? Игривый хипстер? Шрифт на вашем веб-сайте является важным фактором, благодаря которому посетители совершают такие звонки.
На самом деле, в этой статье Дерек Халперн из Social Triggers рассказывает об эксперименте, в ходе которого гости ресторана делали предположения об уровне мастерства шеф-повара на основе шрифта, используемого в меню . Увлекательно, не так ли?
Кроме того, есть вопрос пользовательского опыта. Хотя мы все знаем, что контент имеет решающее значение, не менее важно и то, как вы представляете свой контент. Вы можете писать самые продуманные статьи в мире, но если они представляют собой неразборчивую кашу, никто не заметит.
На самом деле в той же статье приводится другой эксперимент. Здесь участников просили оценить, сколько времени им потребуется для выполнения данного набора инструкций.
Поразительно, когда инструкции были напечатаны более сложным шрифтом, 9По оценкам 0009, сколько времени потребуется для их завершения, почти удвоилось.
В свете этих выводов, как вы думаете, могут ли шрифты влиять на то, как люди воспринимают ваш веб-сайт? Я тоже. На самом деле выбор правильного шрифта критически важен для успеха веб-сайта! Они напрямую влияют на показатель отказов, конверсию и другие важные факторы.
Кроме того, не могли бы вы взглянуть на этот список тем WordPress, ориентированных на типографику. Разве они не прекрасны? Я знаю, я не мог не согласиться с вами больше.
Установка шрифтов из Google Fonts
Хорошо, теперь давайте перейдем к сути всей этой статьи: Как на самом деле получить пользовательские шрифты на вашем сайте. Как упоминалось ранее, мы рассмотрим два сервиса, которые могут помочь вам в этом.
Первый — Google Fonts. Его библиотека содержит сотни шрифтов с открытым исходным кодом, готовых для отображения на вашем веб-сайте.
Получить их там просто, как вы увидите в этом пошаговом руководстве.
1. Найдите правильный шрифт
Сначала нам нужно выбрать шрифт, который мы хотели бы добавить на нашу страницу. Если вы точно знаете, какой шрифт ищете, вы можете просто выполнить поиск любого шрифта по названию.
Для тех, кто не определился или хочет немного просмотреть, Google предлагает несколько вариантов фильтров:
Категория
- Serif (Шрифты с маленькими линиями в конце штрихов, например Times New Roman)
- Sans-Serif (Простые шрифты без лишних строк, как у Torque)
- Дисплей (для использования в больших размерах, например, для заголовков)
- Рукописный ввод (Шрифты, имитирующие почерк)
- Моноширинный интервал (все символы имеют одинаковый интервал
)
Тип
- Толщина (от очень тонкой до очень толстой)
- Наклонный (от прямого к наклонному)
- Ширина (от узкого до широкого интервала между символами)
Шрифт (для других алфавитов, кроме латиницы)
- Кириллица
- Расширенная кириллица
- Деванагари
- Греческий
- Греческий расширенный
- Кхмерский
- Латинский
- Расширенная латиница
- вьетнамский
В моем случае я просто выбираю вариант поиска по имени, так как хочу установить «Advent Pro», шрифт, который мне очень нравится.
2. Выберите свой шрифт
Затем добавьте нужный шрифт в свою коллекцию, нажав синюю кнопку в правом нижнем углу. В нижней части экрана откроется панель, на которой сохранены все выбранные шрифты. Примечание. Вы можете добавить более одного семейства шрифтов.
Если вы удовлетворены своим выбором, нажмите «Использовать» в правом верхнем углу вашей коллекции шрифтов.
3. Выберите стили шрифта
Теперь мы выберем различные стили шрифта. Большинство шрифтов имеют разную толщину. Поскольку загрузка пользовательских шрифтов приводит к увеличению времени загрузки страницы (обратите внимание на шкалу справа), вам следует добавлять только те, которые вам действительно нужны. В моем примере я выбираю «нормальный», «легкий» и «экстралегкий».
4. Выберите дополнительные наборы символов (необязательно)
Если вы планируете отображать свой сайт на языке с другим алфавитом, и если выбранный вами шрифт поддерживает это, в следующем разделе вы можете выбрать нужный вам подмножество .
Поскольку я не планирую делать ни того, ни другого, я просто оставлю все как есть.
5. Скопируйте код и добавьте его на свой сайт WordPress
В соответствии с вашим выбором выше, Google Fonts сгенерирует необходимый код для загрузки шрифтов на вашу страницу. Для этого у вас есть три варианта: HTML, CSS или Javascript.
Если вы выбираете HTML или Javascript, предоставленный код помещается в ваш документ header.php, желательно сразу после тега
. Если вы выберете CSS, вызов необходимо добавить в начало вашего файла style.css.6. Вызов шрифта в вашем CSS
Теперь шрифт полностью интегрирован на ваш сайт. Все, что осталось сделать, это на самом деле вызвать его куда-нибудь. Чтобы отобразить ваш пользовательский шрифт, вы должны назначить его элементу на вашем сайте с помощью CSS, например. вот так:
ч2 {
семейство шрифтов: «Advent Pro», без засечек;
вес шрифта: 400;
} Теперь все готово. Теперь это было не так сложно, не так ли? Тем не менее, WordPress не был бы WordPress, если бы не было плагина для решения той же задачи.
Easy Google Fonts — это плагин, который позволяет вам устанавливать Google Fonts на свой сайт без какого-либо кодирования. Он также интегрирован с настройщиком WordPress, чтобы вы могли просматривать изменения шрифтов на своем сайте в режиме реального времени. Итак, если вы ищете способ добавить пользовательские шрифты на свой сайт, не касаясь каких-либо файлов, это жизнеспособный вариант.
Установка пользовательских шрифтов в WordPress из Adobe Edge
Наш второй претендент в списке — веб-шрифты Adobe Edge. Это сервис, как вы уже догадались, Adobe, создателя Photoshop (и этого надоедливого Flashplayer, который всегда хочет обновляться).
Как и Google Fonts, Edge Web Fonts — это каталог с более чем 500 бесплатными шрифтами. Сервисы, возможно, даже проще в использовании, чем решение Google. Нажмите «Начать» на главной странице или перейдите по этому адресу, чтобы начать.
1. Найдите свой шрифт
Чтобы найти шрифт своей мечты, вы можете выполнить поиск напрямую по имени или отфильтровать доступные шрифты по ряду классификаций и свойств.
- Классификации (Sans-serif, Serif, Slab Serif, Script, Blackletter, Monospaced, Handmade и декоративные)
- Рекомендуется для заголовков или абзацев (очень хорошая идея!)
- Толщина шрифта, высота, ширина, прописные/строчные буквы, контрастность, старый стиль/подкладка цифр (последняя точка относится к стилю цифр)
- Языковая поддержка иностранных языков и альтернативных алфавитов, таких как кириллица, каталонский, немецкий или шведский
Мой выбор «Advent Pro» также доступен здесь, поэтому у меня нет проблем с его поиском по названию.
2. Добавить к вашему выбору
При наведении курсора на понравившийся шрифт открывается новое окно со всеми доступными стилями и их лицензиями. Нажмите на ссылку лицензии, чтобы узнать, доступен ли шрифт для предполагаемого использования. Чтобы получить его на своем сайте, нажмите «Выбрать этот шрифт» вверху.
3.
Настройка шрифтаВнизу откроется меню, в котором вы можете дополнительно настроить шрифт. Сначала выберите, хотите ли вы использовать стандартное подмножество или все доступные символы. Стандарт включает все символы Latin-1, а также некоторые полезные типографские знаки. Второй вариант состоит из всех символов, доступных в этом шрифте. Опять же, это проблема с загрузкой.
Затем выберите нужные стили. Включайте только те, которые вам действительно нужны. Если вы собираетесь использовать только полужирный и обычный шрифт на своем сайте, остальные загружать не нужно.
4. Разместите код на своем сайте
После завершения настройки скопируйте код внизу. В отличие от шрифтов Google, веб-шрифты Adobe Edge предоставляют только сценарий JS. Как я уже упоминал ранее, это должно быть включено в раздел вашего веб-сайта, желательно сразу после начального тега.
Примечание. Если вы выберете более одного шрифта, все они будут включены в одну строку кода, чтобы вы могли сразу добавить их на свой сайт.
Нет необходимости проходить один и тот же процесс несколько раз и добавлять несколько строк кода.
5. Вызвать шрифт в style.css
Теперь все, что осталось сделать, это вызвать шрифт где-нибудь в вашей таблице стилей. Чтобы упростить эту задачу, веб-шрифты Adobe Edge предоставят вам образец CSS в нижней части экрана, включая резервный шрифт для неподдерживающих браузеров.
Используйте это, чтобы шрифт отображался на вашем сайте, например, в заголовках:
h2,
h3,
h4 {
семейство шрифтов: advent-pro, без засечек;
} Легко, не правда ли?
Кратко о пользовательских шрифтах для WordPress
Добавление пользовательских шрифтов на ваш веб-сайт WordPress может иметь огромное значение. Они являются отличным инструментом дизайна, передают индивидуальность и позволяют вам развивать свой брендинг. Кроме того, они также определяют удобочитаемость вашего контента и напрямую влияют на взаимодействие с пользователем.
Использование веб-шрифтов — это удобный способ добавить на сайт индивидуальную типографику.