Как разместить шрифты локально в WordPress (классические и блочные темы!)

Хотя использование пользовательских веб-шрифтов — отличный способ сделать ваш сайт более уникальным и выделить ваш бренд, оно также может привести к определенным проблемам — от конфиденциальности до производительности. Решение: вместо этого размещайте свои шрифты локально на своем веб-сайте WordPress.

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

Хостинг веб-шрифтов локально или удаленно

Итак, первое, о чем мы, вероятно, должны поговорить, это то, что вообще означает размещение шрифтов локально.

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

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

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

Почему вы должны локально размещать шрифты в WordPress?

Есть много веских причин для размещения файлов шрифтов на собственном сервере вместо использования стороннего решения:

• Вопросы конфиденциальности . Особенно если вы подпадаете под действие европейских законов о конфиденциальности, использование веб-шрифтов, особенно от Google, может быть проблематичным. Компания собирает IP-адреса посетителей и другую информацию, которую необходимо указать в политике конфиденциальности, если вы хотите ее использовать. В противном случае вы рискуете получить штраф. Чтобы избежать подобных проблем, многие люди просто предпочитают размещать шрифты локально.
• Доступность фонда . Проблема с использованием сторонних размещенных шрифтов заключается в том, что вы становитесь зависимыми от службы, которая их предоставляет. Если они обанкротятся, у них сломается сервер или по какой-то причине изменится их URL-адрес, внезапно на вашем сайте не будет выбранного вами шрифта. Хотя это маловероятно в случае с Google, вы никогда не знаете, и более безумные вещи случались.
• Более широкий выбор — в то время как известные библиотеки предлагают широкий спектр различных шрифтов, доступно гораздо больше, чем веб-шрифты. Следовательно, знание того, как размещать шрифты локально, дает вам гораздо больше возможностей для покупки и использования премиум-шрифтов.
• Производительность . При размещении собственных шрифтов вы полностью контролируете их загрузку. Вы можете настроить их кеширование и исправить любые проблемы на своем собственном сервере. Кроме того, размещение собственных шрифтов приводит к меньшему количеству HTTP-запросов, поскольку вам не нужно извлекать данные из другого соединения. Все вышеперечисленное хорошо влияет на производительность сайта.

Недостатки и предостережения

В то же время есть и некоторые факторы, говорящие против размещения шрифтов на локальном сервере:

• Производительность, опять же — Google Fonts специально настроены таким образом, чтобы обеспечить высокую производительность. У них есть CDN для обслуживания файлов шрифтов с ближайшего сервера. Кроме того, многие из самых популярных шрифтов уже находятся в кеше большинства браузеров. Как следствие, они загружаются быстрее, чем ваш премиум-шрифт. По той же причине не стоит размещать собственные видео. По всем вышеперечисленным причинам рекомендуется использовать собственный CDN, если вы собираетесь использовать локальные шрифты.
• Более высокая сложность . Локальная настройка файлов шрифтов сложнее, чем, скажем, использование шрифтов Google, установленных в вашей теме. Однако, как вы увидите ниже, если вы не идете полностью ручным путем, это не намного сложнее. На самом деле, есть несколько плагинов в один клик.

Коротко о форматах файлов

Одна вещь, которую вы должны знать, это то, что шрифты доступны в разных форматах, наиболее распространенными из которых являются:

• Шрифты TrueType (.ttf) — это стандарт шрифтов, разработанный в 1980-х годах Apple и Microsoft. Это наиболее распространенный формат для операционных систем, который также можно использовать в Интернете. Хотя это не рекомендуемый формат файла, это хороший запасной вариант для старых версий Safari, iOS и Android.
• Шрифты OpenType (.otf) — созданный на основе TrueType, разработанный и зарегистрированный под торговой маркой Microsoft, формат .otf предназначен для масштабируемых компьютерных шрифтов.
• Встроенные шрифты OpenType (.eot) — это устаревший формат OpenType для отображения в Интернете. Это требуется для более старых версий Internet Explorer.
• Web Open Font Format (.woff) — WOFF был специально разработан для использования на веб-страницах. Это формат OpenType/TrueType со сжатием и дополнительными метаданными. Этот формат рекомендуется для использования W3C и поддерживается всеми основными браузерами.
• Web Open Font Format 2.0 (.woff2) — улучшенная версия .woff с улучшенным сжатием для более быстрой загрузки. Разработан Google и совместим с самыми современными браузерами.
• Шрифты SVG (.svg) — также можно использовать формы SVG для шрифтов, но в настоящее время этот метод поддерживается только Safari.

Итак, какой формат выбрать? Конечно, WOFF/WOFF2 с точки зрения производительности имеет наибольший смысл. Однако для совместимости со старыми браузерами также полезно использовать другие форматы. Кроме того, некоторые поставщики, такие как Google Fonts, предоставляют для загрузки только .ttf или аналогичные форматы. К счастью, есть обходные пути, которые мы сейчас покажем.

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

Локальное размещение шрифтов в WordPress (вручную, классические темы)

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

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

1. Получите ваши файлы шрифтов

Первое, что вам нужно для локального размещения шрифтов, — это файлы шрифтов. Google Fonts позволяет их загружать, но, как упоминалось выше, пока не предоставляет последние форматы файлов. Хотя теоретически вы можете преобразовать их файлы в желаемый формат самостоятельно, вместо этого гораздо проще использовать Google Webfonts Helper.

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

Первое, что вам нужно сделать здесь, это выбрать шрифт по своему вкусу. Для этого вы можете использовать список слева или поле поиска над ним. Когда вы нашли нужный шрифт (в этом примере мы собираемся с Advent Pro), пришло время выбрать набор символов и стили справа.

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

В разделе «Копировать CSS» вы можете выбрать, какие форматы файлов вы будете загружать.

Параметр «Лучшая поддержка» включает файлы .eot , .ttf , .svg , .woff и .woff2 , в то время как современные браузеры включают только два последних. Обычно рекомендуется оставить значение по умолчанию.

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

2. Загрузите файлы шрифтов на свой сайт WordPress.

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

Для этого подключитесь к нему через FTP-клиент и перейдите в каталог вашей темы (внутри wp-content > themes ). Здесь имеет смысл разместить файлы в их собственном каталоге, например, fonts . Поэтому сначала создайте каталог, а затем перетащите файлы шрифтов в FTP-клиент, чтобы загрузить их.

Файлы небольшие, поэтому это не займет много времени, и вы можете перейти к следующему шагу.

3. Загрузите локальные шрифты в свою тему WordPress.

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

Внизу вы можете настроить имя папки, если та, в которую вы поместили свои файлы, не называется fonts . Вы уже должны были сделать свой выбор в отношении того, используете ли вы код для максимальной совместимости или только для современных браузеров ранее. Поэтому теперь пришло время просто щелкнуть в поле с разметкой, чтобы все это отметить, а затем скопировать с помощью Ctrl/Cmd+C .

После этого перейдите в папку вашей темы на вашем сервере и откройте таблицу стилей ( style.css ). Здесь вставьте разметку, которую вы скопировали ранее, в ее начало.

Краткое примечание: чтобы использовать относительные пути с @font-face , то есть если вы хотите, чтобы WordPress имел доступ к вашим локальным файлам шрифтов внутри каталога fonts в папке вашей темы, вам нужно удалить ../ перед URL-адресами выше. Итак, в моем случае каждая строка будет выглядеть так:

 url('fonts/advent-pro-v19-latin-regular.woff') format('woff'), /* Modern Browsers */

Предполагается, что ваш файл style.css находится непосредственно в папке вашей темы.

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

4. Удалите шрифты, которые уже загружаются на ваш сайт

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

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

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

Наконец, вы можете попробовать отключить и удалить шрифты Google. Autoptimize также имеет возможность удаления Google Fonts, вы можете найти ее на вкладке «Дополнительно» .

4. Используйте свои местные шрифты

Последний шаг — фактически назначить ваши локальные шрифты элементам на вашем сайте. Например, в теме Twenty Twenty-One вы можете использовать следующую разметку:

 .entry-title { font-family: Advent Pro; }

Это приводит к тому, что заголовки ваших сообщений в блоге отображаются с новым шрифтом Advent Pro:

Размещение локальных шрифтов в классических темах: Plugin Edition

Если вышеперечисленное слишком сложно для вас и у вас уже есть шрифты Google на вашем веб-сайте (например, через тему), вы также можете использовать плагин WordPress для локального размещения ваших шрифтов. Одним из лучших вариантов для этого является плагин OMGF или Optimize Google Fonts, который доступен бесплатно в каталоге WordPress. Установите его обычным способом через Плагины > Добавить новый .

После этого вы найдете новый пункт меню в разделе «Настройки» под названием «Оптимизировать шрифты Google ». Нажмите на нее, чтобы попасть в это меню:

Использование довольно простое. В большинстве случаев все, что вам нужно сделать, это нажать «Сохранить и оптимизировать» внизу. Затем плагин автоматически найдет все таблицы стилей Google Fonts на вашем сайте и заменит их локальными версиями. Вы можете увидеть их все в нижней части экрана.

Здесь у вас также есть возможность настроить плагин так, чтобы он не загружал некоторые шрифты или стили шрифтов или предварительно загружал их, что важно для типографики, которая появляется над сгибом. Есть еще несколько настроек, но они в основном для случаев, когда что-то не работает.

OMGF также заплатил за установку большего количества шрифтов Google на вашем сайте. Это очень справедливо по цене и стоит проверить. Другие варианты плагинов включают Perfmatters и Pro-версию вышеупомянутого плагина Disable and Remove Google Fonts.

Размещение шрифтов вручную в блочных темах WordPress

Блочные темы WordPress также позволяют использовать локальные шрифты. Фактически, на момент написания этой статьи это все, что они делают, в настоящее время вы не можете размещать сторонние шрифты в блочной теме (хотя API для этого находится в разработке).

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

Загрузка шрифтов внутри theme.json

В блочных темах theme.json является центральным файлом для стилей, и именно в нем вы настраиваете шрифты. Для этого найдите fontFamilies в settings и typography .

В блочных темах новые шрифты добавляются со следующими значениями:

• fontFamily — имя нового шрифта, которое будет использоваться в CSS. Это означает, что он может включать резервные шрифты.
• name — Имя шрифта, которое будет отображаться в админке WordPress.
• slug — уникальный идентификатор, который WordPress использует в пользовательском свойстве CSS.
• fontFace — это соответствует правилу CSS @font-face и именно это ставит шрифт в очередь.

Для работы fontFace включает в себя несколько других частей информации:

• fontFamily — Имя шрифта (опять же).
• fontWeight — Список доступных весов шрифтов, разделенных пробелами.
• fontStyle (необязательно) — здесь вы можете установить атрибут font-style , например, normal или italic .
• fontStretch (необязательно) — например, для семейств шрифтов, имеющих сокращенную версию.
• src — Путь к локальному файлу шрифта.

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

 "fontFamilies": [ { "fontFamily": "Advent Pro", "slug": "advent-pro", "fontFace": [ { "fontFamily": "Advent Pro", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-regular.woff" ] }, { "fontFamily": "Advent Pro", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-italic.woff" ] } ] } ]

При активном плагине Gutenberg вы также можете использовать wp_register_webfonts() внутри functions.php вместо этого, это новая функция PHP для этой цели, которой еще нет в Core. Он принимает те же аргументы, что и выше, но в формате PHP.

Локальные шрифты в блочных темах: плагин

Наконец, также возможно локально размещать шрифты в блочных темах WordPress с помощью плагинов. Одним из них является плагин Create Block Theme. После того, как вы установите и активируете его, он добавит новую опцию «Управление шрифтами темы» в меню «Внешний вид» .

Здесь вы можете просмотреть семейства шрифтов, включенные в вашу текущую тему, а также удалить целые семейства шрифтов или отдельные стили.

Что еще более интересно, так это кнопки с надписью «Добавить шрифт Google» и «Добавить локальный шрифт» вверху. Начнем с опции Google Font.

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

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

Опция локального шрифта работает очень похоже.

Разница здесь в том, что вы загружаете файл шрифта с жесткого диска и должны указать имя шрифта, стиль и вес, чтобы тема знала, что к чему (плагин также автоматически пытается распознать эту информацию). Это также означает, что вам нужно загружать файлы шрифтов один за другим. Однако в целом все очень просто.

Готовы ли вы размещать шрифты локально в WordPress?

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

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

Как вы решили разместить свои шрифты локально в WordPress? Дайте нам знать в разделе комментариев!