Пользовательские шрифты для сайта wordpress (пошагово)

Какой шрифт выбрать для сайта

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

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

Шрифты Google – это лишь инструмент. Доступный, бесплатный, простой в настройке, но инструмент. Поэтому в неумелых руках он может скорее навредить, чем помочь. Настроить и интегрировать нужный шрифт на свой сайт сможет практически любой. Каких-либо особенных знаний не требуется, тем более сервис предоставляет подробные инструкции. А вот правильный выбор шрифта – очень ответственный шаг. И здесь лучше не ошибаться.

Зачем подключать веб-шрифты

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

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

Рассмотрим два способа подключить веб-шрифты

Подключить веб-шрифт со стороннего сервиса, например Google Fonts через <link>
Подключить файлы шрифтов через @font-face

Playfair Display

Playfair Display — один из самых известных шрифтов с засечками. Автор — Клаус Эггерс Соренсен. Идеология этого шрифта основана на изящных каллиграфических формах 18 века. Разработан в 2011 году, но до сих пор не теряет популярности. Контрастный и умеренно широкий, он идеально подходит для любых заголовков.

Этот шрифт будет отличным акцентом в проектах, где вы хотите подчеркнуть изящность, лаконичность, статусность или эстетичность бренда. Playfair Display удачно комбинируется с рублеными шрифтами умеренной ширины, вроде Open Sans.

Примеры использования: zack.es, sachatourtoulou.com, councl.com.

Информация о шрифте Europe Normal

Полное название шрифта

Europe Normal Regular 400

Семейство

Начертание шрифта

Regular (Обычный)

Насыщенность шрифта

400 — нормальное (Normal)

Версия шрифта

001.000

Идентификатор шрифта

FontMonger:Europe Normal

PostScript название шрифта

EuropeNormal

Авторское право на шрифт

Поддержка символов

латинские буквы, русские буквы (кириллица), цифры, знаки препинания и пунктуации

Регистр букв шрифта

верхний (прописные буквы) и нижний (строчные буквы)

Категории шрифта Europe Normal

Бесплатные шрифты, Кириллические шрифты, Латинские шрифты, Русские шрифты, Шрифты без засечек

Предварительный просмотр Europe Normal

Шрифт Europe Normal с поддержкой латиницы

Предварительный просмотр шрифта «Europe Normal» с прописными и строчными латинскими буквами (английский алфавит A-Z и a-z).

Шрифт Europe Normal с поддержкой кириллицы

Предварительный просмотр шрифта «Europe Normal» с прописными и строчными русскими буквами (кириллица, русский алфавит А-Я и а-я).

Шрифт Europe Normal с поддержкой цифр

Предварительный просмотр шрифта «Europe Normal» с цифрами (0 1 2 3 4 5 6 7 8 9).

Шрифт Europe Normal с поддержкой знаков препинания и пунктуации

Предварительный просмотр шрифта «Europe Normal» со знаками препинания и пунктуации (, . / ? ; ‘ : » { } \ | ` ~ ! @ # $ % ^ & * ( ) — _ + =).

Скачать шрифт Europe Normal

Шрифт Europe Normal доступен для скачивания в 6 форматах: EOT, OTF, SVG, TTF, WOFF, WOFF2 (IE9 в режиме совместимости, IE6-IE8, Open Type Font, устаревшая iOS, Safari, Android, iOS и любой современный браузер).Внимание! Скачать шрифт Europe Normal возможно только для некоммерческого использования!

Подробная инструкция по скачиванию шрифтов в статье «Как скачать шрифт на сайте»

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

Для установки шрифта «Europe Normal» на сайт необходимо скопировать все файлы шрифта в папку, например, «fonts/europe-normal». В файле стилей подключить шрифт, используя конструкцию CSS:

Скопировать в буфер обмена

@font-face {
	font-family: "Europe Normal";
	src: url("../fonts/europe-normal/europe-normal.eot"); /* IE9 Compat Modes */
	src: url("../fonts/europe-normal/europe-normal.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("../fonts/europe-normal/europe-normal.otf") format("opentype"), /* Open Type Font */
		url("../fonts/europe-normal/europe-normal.svg") format("svg"), /* Legacy iOS */
		url("../fonts/europe-normal/europe-normal.ttf") format("truetype"), /* Safari, Android, iOS */
		url("../fonts/europe-normal/europe-normal.woff") format("woff"), /* Modern Browsers */
		url("../fonts/europe-normal/europe-normal.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}

Установить шрифт «Europe Normal» для требуемого текста, поля, кнопки или другого элемента на сайте:

font-family: "Europe Normal";

Пример применения шрифта «Europe Normal»:

body {
	font-family: "Europe Normal";
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.2;
	color: #000;
	background-color: #fff;
}

Самые популярные шрифты Google – топ 10 для всех языков

– самый популярный шрифт из имеющихся. Автор – Кристиан Робертсон, общее количество просмотров – более 15,1 биллиона раз (примерно 69 млрд. в неделю).
– второй по популярности. Автор – Стив Мэттесон, общее количество просмотров – более 9,9 биллиона раз (примерно 30 млрд. в неделю).
Lato – качественный сбалансированный шрифт родом из Варшавы. Автор – Лукаш Дзедзич, общее количество просмотров – более 2,5 биллиона раз (примерно 10 млрд. в неделю).
– классный кириллический шрифт в модернистском стиле из Буэнос-Айреса. Основной дизайнер – Джульетта Улановски, общее количество просмотров – более 1,5 биллиона раз (примерно 7,6 млрд. в неделю).
– отличный вариант переработанного «готического» шрифта. Основной дизайнер – Вернон Адамс, общее количество просмотров – более 1,4 биллиона раз (примерно 3,8 млрд. в неделю).
– «сжатый» Roboto, рассчитан на более естественный ритм чтения. Автор – Кристиан Робертсон, общее количество просмотров – свыше 1,3 биллиона раз (примерно 4,9 млрд. в неделю).
– интересный шрифт без засечек от Adobe. Разработан специально для пользовательских интерфейсов. Автор – Пол Д. Хант, общее количество просмотров – более 1,2 биллиона раз (примерно 4,7 млрд. в неделю).
– шрифт фиксированной высоты, созданный специально для онлайн-рекламы. Автор – Джон Хадсон, общее количество просмотров – более 1 биллиона раз (примерно 166 млн. в неделю).
– тонкий и элегантный шрифт без засечек. Исходный автор – Мэт МакИнерни, общее количество просмотров – более 800 млрд. раз (примерно 2,9 млрд. в неделю).
– тот самый шрифт «без тофу», но специально для Японии. Входит в семейство одноимённых шрифтов, разработанных Google, общее количество просмотров – более 660 млрд. раз (примерно 14,2 млрд. в неделю).

Добавление и удаление

Как применять и добавлять шрифты уже ясно, но что делать, если возникает необходимость в удалении определенного шрифта. Тут всё тоже не так сложно и для этого необходимо просто следовать вот таким пунктам:

Получить доступ к папке со всеми шрифтами. Сделать это можно вот таким способом:

Как установить шрифты в Windows 10

вошли в панель управления;
перешли в раздел с названием оформление и персонализация;
открыли шрифты.

Тут всё предельно просто, выбираем среди этого количества файлов и просто удаляем, если в нем нет необходимости.

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

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

Merriweather

Merriweather — это шрифт с засечками, который был разработан специально для комфортного чтения на электронных устройствах. Ещё есть Merriweather Sans — версия без засечек, которая гармонично сочетается со всем семейством.

У Merriweather мягкие засечки и открытые формы, поэтому он практически универсален. Элегантно подчёркивает эстетичность проекта, но дружит и с бизнес-тематикой. Merriweather рекомендуется использовать в паре с самим собой либо с рублеными шрифтами для наборного текста. У Merriweather восемь начертаний, поэтому он может быть очень разным и практически всегда выглядеть безукоризненно.

Примеры: hopesandfears.com, , scmp.com.

Cormorant

Cormorant — это изящный шрифт с засечками, созданный Кристианом Талманном. Включает пять классических начертаний (Light, Regular, Medium, SemiBold, Bold) и большое количество символов. Посмотрите проект на Behance, чтобы детально изучить его.

При создании этого шрифта дизайнер отталкивался от известного всем Garamond, который отлично показывает себя в наборном тексте, но не подходит для заголовков. Стоит отметить, что Кристиану удалось исправить этот недостаток!

Используйте этот шрифт для оформления блогов, life-style сайтов, а также на новостных порталах. В Cormorant удачно сочетаются изящность и строгость, поэтому он безопасен для самых разных проектов.

Примеры использования: sasha-ng.com, readwildness.com/eco, katescott.co/sparhawk.