Как оптимизировать веб-шрифты в WordPress. Шрифты в вордпресс
Как на сайте WordPress оптимизировать веб-шрифты?
Веб-шрифты являются основным элементом современного веб-дизайна и используются подавляющим большинством веб-сайтов, построенных на WordPress. Оптимизация использования и доставки веб-шрифтов на сайтах имеет решающее значение, поскольку плохо оптимизированные веб-шрифты могут привести к снижению производительности всего веб-сайта в целом.
Веб-шрифты довольно широко используются дизайнерами по всему миру. И это неспроста, ведь они часто оказываются более эффективными, чем веб-безопасные (web safe) шрифты, обеспечивая более широкий диапазон размеров и разрешений устройств.
Что такое веб-шрифты?
Вообще на сайтах используется два типа шрифтов:
Веб-безопасные. Это шрифты, которые уже предварительно установлены на устройстве. Среди них: Arial, Times New Roman и Courier New, а также типовые семейства шрифтов (serif, sans-serif и monospace).
Веб-шрифты. Это шрифты, которые не были предварительно установлены на устройстве и должны быть загружены браузером пользователя перед отображением. В результате для сайтов, использующих веб-шрифты, их владельцы должны думать о влиянии дополнительных ресурсов шрифта на общую скорость загрузки сайта.
Размещение и доставка шрифтов
После того, как Вы решили использовать веб-шрифты, нужно решить, откуда их доставлять. Для этого существуют два варианта:
Размещение на своем сайте (локально). В итоге файлы шрифтов размещаются на сервере хостинга вместе с остальными файлами веб-сайта.
Сторонние ресурсы. В таком случае шрифты размещаются на сторонних ресурсах (например, в таких популярных службах шрифтов, как Google Fonts или Typekit).
Сторонние службы размещения шрифтов являются довольно популярными среди веб-дизайнеров. Тем не менее, некоторые разработчики предпочитают избегать использования таких ресурсов по соображениям производительности или безопасности. Понятно, что в этом случае локальное размещение является идеальным вариантом.
Вполне резонно использовать те же Google Fonts или Typekit в ряде нескольких причин:
- не очень быстрый хостинг;
- отсутствие навыков веб-разработки.
Как в WordPress оптимизировать веб-шрифты?
Оптимизация веб-шрифтов является сложной темой, и существует множество различных способов оптимизации доставки шрифтов. Вариант, который подходит Вашему веб-сайту лучше всего, зависит от множества факторов, включая скорость сервера хостинга и сети, размер CSS-файлов сайта, а также технические возможности владельца сайта.
Оптимизация сервисов доставки веб-шрифтов
Начнем пожалуй с этого метода, который является наиболее популярным, быстрым и простым. Следует отметить, что Typekit хоть и довольно популярен среди профессиональных разработчиков, но Google Fonts все же пользуются чаще. Он бесплатный и настолько популярен, что многим пользователям не нужно загружать много ресурсов шрифтов Google, поскольку они уже хранятся в кеше браузера.
Добавить Google-шрифты на сайт WordPress довольно просто. Самым простым методом для этого является подключение шрифтов непосредственно в шапку Вашего сайта с помощью директивы wp_enqueue_script() в основном конфигурационном файле functions.php Вашей активной темы. Если шрифт был добавлен, нужно его подключить также в CSS-файле (например, style.css в папке темы).
В этом случае следует иметь в виду, что в таком случае нужно будет использовать дочернюю тему, так как будут изменяться сами файлы темы. В противном случае Вы потеряете все свои изменения при следующем обновлении темы.
Если Вы не хотите или не умеете вручную править файлы темы WordPress, то специально для этого существуют плагины, которые возьмут всю работу на себя, автоматически добавив шрифты на Ваш сайт.
Плагин Easy Google Fonts
Бесплатный плагин Easy Google Fonts позволит легко настроить стили шрифтов для каждого текстового элемента.
Оптимизация Google Fonts
Все шрифты онлайн-сервиса Google Fonts сжимаются и передаются, используя технологию CDN от Google, что гарантирует в итоге самую быструю доставку. Несмотря на то, что Google Fonts действительно включает эти встроенные методы оптимизации, все равно стоит сделать все возможное, чтобы ускорить доставку и отображение шрифтов на сайте. Для этого существует несколько рекомендаций.
При выборе шрифтов в Google Fonts не стоит выбирать все доступные стили и наборы символов. Добавьте только те стили и наборы символов, которые Вам действительно понадобятся. Тут не обязательно включать все варианты курсива и жирного начертания — браузеры сами откорректируют их правильное отображение.
Можно заметить, что многие сайты используют уникальный шрифт для отображения заголовка сайта. Однако для этого Вам нужно будет добавить дополнительный файл шрифта, который будет загружаться. Для ускорения следует минимизировать воздействие этого дополнительного стиля шрифта путем загрузки только определенных символов, используемых в Вашем заголовке. Это можно сделать, добавив специальный параметр text с необходимыми буквами в конец Google Fonts URL.
К примеру, отобразим слово WPShop, используя шрифт Bungee Shade. В этом случае ссылка будет иметь следующий вид:
<link href='//fonts.googleapis.com/css?family=Bungee+Shade&text=WPShop' rel='stylesheet'>В итоге Google Fonts CDN будет доставлять только указанные символы.
Шрифты, размещенные локально
Локально размещенные файлы шрифтов является наиболее приемлемым вариантом, если Ваш хостинг обеспечивает хорошую скорость, и Вы не хотите быть зависимым от внешних сервисов.
Разместить шрифт самостоятельно довольно просто:
- загрузить файл шрифтов на свой сайт;
- добавить правило @font-face в файл style.css Вашей темы для каждого загруженного шрифта;
- примените шрифты, используя пользовательский CSS.
Есть еще более простой вариант — использовать бесплатный плагин Use Any Font. Он позволит загружать шрифты и назначать их элементам HTML прямо с панели инструментов WordPress. Отметим, что бесплатная версия плагина позволит загрузить лишь один файл шрифта.
Оптимизация локальных шрифтов
При использовании локальных шрифтов нередко допускаются ошибки, ведущие к ухудшению скорости загрузки вашего сайта. Чтобы их избежать, следует придерживаться ряда несложных правил.
Во-первых, все ресурсы шрифтов должны быть максимально сжатыми. Как уже было сказано, во время генерации шрифта следует включать только необходимые стили и наборы символов.
Во-вторых, все шрифты должны быть в четырех форматах: woff2, woff, ttf и eot. Их все необходимо включить в файл стилей с помощью правила @font-face. Это гарантирует, что браузеры выберут самый легкий и быстрый формат.
В-третьих, нужно рассмотреть возможность использования unicode-range для ограничения загруженных ресурсов шрифта только теми символами, которые Вы будете использовать.
Оптимизация веб-шрифтов с помощью CSS-встраивания
Если для Вас важна каждая миллисекунда в процессе загрузки страниц сайта, то оптимизация даже локально размещенных файлов шрифтов имеет место.
Основная идея — использовать кодировку base64 для встроенных шрифтов в таблицу стилей CSS. Это сокращает необходимость того, чтобы браузер посетителя загружал и обрабатывал ресурсы шрифтов, но это означает, что Ваш сайт отдает довольно большой CSS-файл. После загрузки шрифта последующие просмотры страниц, которые используют один и тот же ресурс, будут отображаться быстрее. В результате эта стратегия заслуживает внимания, если Ваш сайт довольно посещаем.
Кодирование загруженных локально файлов шрифтов в таблицу стилей CSS — это довольно просто. localFont — это простой в использовании веб-сервис, который Вы можете использовать для преобразования файлов woff, woff2 и ttf в CSS-стили. Инструмент также предоставляет специальный JS-скрипт, который будет проверять кэш браузера каждого пользователя на наличие CSS-шрифта перед его загрузкой во второй раз.
Еще один способ оптимизации шрифтов
Если Вы будете использовать встроенные CSS-шрифты, то на следующем этапе нужно рассматривать подключение CSS непосредственно в HTML-коде Вашего сайта. Это избавит от необходимости в обращениях к серверу для получения ресурсов шрифтов. Однако это также исключает возможность хранения ресурсов шрифта в кеше пользователя браузера, поскольку шрифты кодируются непосредственно в HTML-код сайта и включаются при каждой загрузке страницы.
Если Вы встраиваете CSS-шрифт непосредственно в HTML-код своего сайта, следует использовать исключительно одно семейство, один стиль и набор символов. Если для сайта необходимы дополнительные семейства шрифтов, стили и наборы символов, загрузите их отдельно.
Если Вам понравилась статья — поделитесь с друзьями
wpschool.ru
Как оптимизировать веб-шрифты в WordPress
Веб-шрифты являются одной из фундаментальных основ современного веб-дизайна. Они подключены на подавляющем большинстве WordPress-сайтов. Оптимизация использования и подключения веб-шрифтов критически важна, поскольку плохо оптимизированные веб-шрифты могут ухудшить производительность вашего сайта. Несмотря на этот риск, отказываться от веб-шрифтов полностью не стоит. Такие шрифты популярны по многим причинам.
Дизайнеры любят веб-шрифты за лицензии, под которыми они предоставляются, а также за улучшенный опыт взаимодействия.
Веб-шрифты зачастую обрабатываются гораздо быстрее, нежели web safe шрифты (шрифты, которые часто применяются для оформления документов в сети) на широком спектре устройств разных размеров и разрешений.
В этой статье мы рассмотрим веб-шрифты, а также изучим методы и инструменты, которые вы можете использовать для добавления оптимизированных веб-шрифтов к вашему WordPress-сайту.
Что представляют собой веб-шрифты?
Перед тем, как мы будем говорить об оптимизации подключения веб-шрифтов, я хочу убедиться, что мы понимаем терминологию. Если касаться веб-сайтов, для них есть два базовых типа шрифтов:
- Web Safe шрифты (веб-безопасные шрифты). Это такие шрифты, которые уже предустановлены на устройствах. Сюда относятся базовые шрифты, такие как Arial, Times New Roman, Courier New, а также некоторые универсальные семейства шрифтов, как serif, sans-serif и monospace.
- Веб-шрифты – это такие шрифты, которые не предустановлены на устройствах и должны быть сначала загружены пользовательским браузером, и только потом они уже могут быть выведены на экран.
В целом, веб-шрифты должны быть загружены браузером посетителя сайта, в то время как веб-безопасные шрифты не требуют дополнительной загрузки. Как результат, владельцам сайтов, на которых используются веб-шрифты, нужно задуматься о воздействии загрузки шрифтов на производительность сайта.
Размещение и доставка веб-шрифтов
Если вы решили использовать веб-шрифты, вы должны определиться с тем, как вы будете хранить ресурсы шрифтов. Есть два варианта размещения веб-шрифтов:
- Размещение на своем сайте. Ресурсы шрифта размещаются на вашем собственном сервере вместе с остальными файлами сайта.
- Размещение на сторонних серверах. Ресурсы шрифтов размещаются на сторонних сервисах, таких как Google Fonts или Typekit.
Использование стороннего сервиса, такого как Google Fonts, является наиболее популярным и простым методом работы с веб-шрифтами. Однако некоторые разработчики не любят полагаться на сторонние сервисы из соображений производительности и безопасности, и в таком случае размещение ресурсов шрифтов у себя на сервере является оптимальным вариантом. Если у вас нет технических навыков или достаточных серверных мощностей для передачи ресурсов шрифтов быстрее, чем это делают Google или Adobe, лучше всего использовать уже существующие сервисы для размещения и доставки веб-шрифтов.
Оптимизация веб-шрифтов – это достаточно сложная задача, и есть много разных способов оптимизации доставки веб-шрифтов. Тот вариант, который будет идеально соответствовать вашему сайту, зависит от массы разных факторов, включая скорость вашего сервера и сети, размер CSS-стилей вашего сайта, а также ваши технические навыки.
Оптимизация веб-шрифтов, добавляемых через сервисы
Начнем мы с этого варианта, поскольку он является самым простым и популярным. В то время как Typekit популярен среди профессиональных разработчиков, Google Fonts является самым распространенным источником сторонних шрифтов. Сервис является бесплатным, свободным в использовании; пользователям не нужно скачивать многочисленные ресурсы шрифтов Google Fonts, поскольку шрифты уже хранятся в кэше браузера.
Добавление Google Fonts к WordPress-сайту является простым действием. Самая быстрая реализация – это добавление шрифтов непосредственно к файлу header.php темы с помощью HTML-элемента link или к файлу functions.php с помощью wp_enqueue_script().
Как только шрифты будут добавлены к header.php или functions.php, вы сможете применить их на сайте через произвольные CSS-правила.
Помните о том, что вам нужно будет использовать дочернюю тему, если вы хотите внести какие-либо изменения в файлы основной темы. Иначе вы потеряете все свои изменения вместе со следующим обновлением темы.
Если вы не хотите трогать файлы темы, вы можете воспользоваться WordPress-плагинами, которые позволят добавить Google Fonts к вашему сайту.
Мой любимый плагин для добавления Google Fonts к WordPress-сайту – это Easy Google Fonts. Он позволяет легко настраивать стили шрифтов для каждого текстового элемента и создавать произвольные селекторы для специальных элементов. Стили шрифтов присваиваются к каждому элементу и произвольному селектору через кастомайзер. Как результат, вы получаете лайв-превью всех изменений.
Еще один популярный вариант для добавления Google Fonts к WordPress – это плагин WP Google Fonts. Этот плагин, к сожалению, не предлагает лайв-превью изменений, но зато он дает гораздо больше возможностей по настройке стилей шрифтов и наборов символов. По этой причине, если вы не слишком довольны той нагрузкой, которую оказывает Easy Google Fonts на ваш сайт, вы можете перейти на WP Google Fonts и выбрать более узкое подмножество стилей шрифтов и наборов символов.
Оптимизация Google Fonts
Все шрифты Google Fonts являются сжатыми и поставляются через сеть CDN от Google, которая позволит добиться максимально быстрой доставки. Даже учитывая тот факт, что Google Fonts уже включает встроенную оптимизацию, все равно есть возможность ускорить доставку шрифтов.
При выборе Google Fonts не включайте все доступные стили и наборы символов. Тщательно продумайте стили и наборы символов, которые вам действительно нужны, и добавьте только эти стили и подмножества. Учтите, что вам не нужно обязательно включать все вариации курсива или полужирного начертания. Браузеры сами скорректируют эти стили, если соответствующий шрифт будет недоступен.
На многих сайтах используется уникальный шрифт для стилизации заголовка сайта. Однако реализация этого означает, что вам нужно будет добавить дополнительный файл шрифта, который будет загружаться. Минимизируйте воздействие этого дополнительного стиля шрифта путем загрузки только определенных символов, используемых в вашем заголовке. Вы можете сделать это, добавив &text= с необходимыми буквами в конец Google Fonts URL.
К примеру, если вы хотите вывести слово Kinsta, используя Bungee Shade, вы можете сделать это при помощи следующей ссылки:
<link href='//fonts.googleapis.com/css?family=Bungee+Shade&text=Kinsta' rel='stylesheet'>Обратите внимание, что здесь мы добавили &text=Kinsta к элементу link. В итоге Google Fonts CDN будет доставлять только прописную букву K, а также строчные буквы i, n, s, t и a.
Использование шрифтов, размещенных на своем сервере
Шрифты, размещенные на своем сервере – это лучший вариант, если вы используете шрифты, которые недоступны в сервисах; если вы можете доставить шрифты быстрее, чем сервисы; или если вы хотите избежать зависимости от сторонних ресурсов.
Добавить шрифт к WordPress вручную не так сложно:
- Загружаем файлы шрифта на свой сайт
- Добавляем правило @font-face к style.css вашей темы для каждого загруженного шрифта
- Применяем шрифты, используя произвольные CSS-стили
Однако, если вы хотите несколько упростить этот процесс, вы можете воспользоваться плагином Use Any Font, который позволяет загружать шрифты и привязывать их к HTML-элементам прямо из консоли WordPress. Вы можете использоваться бесплатную версию плагина для загрузки одного файла шрифта. За $10 и больше вы можете открыть возможность загрузки неограниченного количества шрифтов.
Оптимизация самостоятельно загруженных шрифтов
При использовании самостоятельно загруженных шрифтов можно очень легко допустить ошибки, которые могут привести к значительному снижению скорости работы сайта. Чтобы избежать таких ошибок, следуйте данным рекомендациям.
Во-первых, старайтесь сохранить ресурсы шрифтов максимально сжатыми. При генерации ресурса шрифта или добавления шрифтов к вашему сайту включайте только стили и наборы символов, которые вы действительно планируете использовать.
Во-вторых, поставляйте шрифты в четырех форматах: woff2, woff, ttf и eot. При добавлении этих шрифтов к вашему CSS-файлу с помощью правила @font-face обязательно придерживайтесь данного порядка. Это позволит гарантировать, что браузеры выберут самый быстрый формат, который они могут обработать.
В-третьих, рассмотрите возможность использования подмножества unicode-range, чтобы ограничиться только теми наборами символов, которые вы планируете использовать.
Оптимизируйте веб-шрифты с помощью CSS-инлайнинга (встраивания)
Если вы технически подкованы и готовы бороться за каждую миллисекунду, вы можете ускорить загрузку сайта, воспользовавшись инлайнингом.
Основная идея этого подхода заключается в том, чтобы использовать кодирование base64 для встраивания шрифтов в стилевую таблицу CSS. Соответственно, браузер пользователя сможет избежать загрузки и обработки ресурсов шрифта.
Способен ли инлайнинг шрифтов ускорить загрузку сайта? По этому вопросу мнения разделились. Причина, по которой многие выбирают этот путь – преимущества браузерного кэширования. Как только ресурс шрифта будет загружен, все последующие просмотры, основанные на том же самом ресурсе, будут обрабатываться гораздо быстрее. Как результат, такая стратегия достойна рассмотрения, если ваш сайт имеет массу возвращающихся посетителей и многочисленные просмотры страниц в пределах одной сессии.
Кодирование ваших файлов шрифта в CSS-таблице – достаточно простая задача. localFont – простой в использовании веб-интерфейс, который вы можете применить для конвертации файлов woff, woff2 и ttf в инлайн CSS. Инструмент предлагает даже JS-скрипт, который будет проверять кэш браузера каждого пользователя на наличие необходимого шрифта перед тем, как загружать этот шрифт повторно.
Еще одна дополнительная оптимизационная методика для легких сайтов
Если вы перешли с самостоятельного размещения файлов шрифтов к встраиванию шрифтов в CSS, следующим логическим шагом будет рассмотреть возможность встраивания CSS непосредственно в HTML-код вашего сайта. В случае с данной стратегией ресурсы шрифтов включаются в HTML-документ сайта, устраняя необходимость в обращениях к серверу для получения ресурсов шрифтов. Однако эта тактика также устраняет и преимущества хранения ресурсов шрифта в кэше пользовательского браузера, поскольку шрифты прописываются прямо в HTML-коде сайта и подключаются с каждой загрузкой страницы.
Если вы встраиваете шрифт в CSS прямо в HTML, используйте только одно семейство, один стиль и один набор символов. Если вам нужны дополнительные семейства шрифтов, стили или наборы символов, загружайте их отдельно. В целом, если ваша тема не является минималистичной, включение шрифтов с помощью CSS в HTML-код не позволит улучшить общую производительность сайта и приведет только к лишним проблемам.
Источник: kinsta.com
oddstyle.ru
web master | Добавляем шрифты для иконок в WordPress
Главная » WordPress » Добавляем шрифты для иконок в WordPressУ вас появилась потребность добавить свои шрифты на сайт WordPress? Отличная идея! Они помогут разнообразить уже используемую вами тему и внести в нее что-то новое.
Шрифтовые иконки — это векторные иконки, используемые как шрифты. Они очень популярны среди веб-дизайнеров, в виду того, что они выглядят симпатичнее, нежели растровые изображения. Также они могут изменять размер без потери качества и стилизированы с помощью CSS.
Преимущества и недостатки иконочных шрифтов
Традиционные изображения с давних пор хорошо себя зарекомендовали в качестве графических элементов оформления сайта, в современную эпоху их постепенно вытесняют новые возможности CSS3, SVG и шрифты с иконками.
С чем связана их популярность? Решающую роль сыграли гибкость настройки, простота установки и использования в проекте. Основные преимущества:
- В коллекции более 500 бесплатных векторных иконок для сайта.
- Иконки масштабируются до любого размера без потери качества.
- Стилизация с помощью CSS — размер шрифта, цвет и другие свойства.
- Не требуется включенная поддержка JavaScript в браузере.
- Кроссбраузерность (IE7 и выше), поддержка мобильных браузеров.
Наряду с преимуществами стоит упомянуть о недостатках, они, к сожалению, тоже есть, но довольно незначительные:
- В отличие от картинок, которые одинаково отображаются в различных браузерах, шрифты могут выглядеть по разному в зависимости от браузера и операционной системы.
- Дизайнеры детально проработали значительное количество иконок, однако существует вероятность, что Вы не найдете нужную для своего проекта.
Где найти иконочные шрифты
Первым делом вам необходимо установить и активировать плагин WP Visual Icon Fonts. После активации вам нужно перейти в раздел Параметры » Icon Fonts административной панели сйата и выбрать набор иконок шрифта. На текущий момент в плагине есть шрифты Font Awesome . Он содержит 585 иконок, которые включают в себя интерфейсные и социальные иконки, стрелки и т.д.
Плагин производит полноценное подключение шрифтов, их можно будет использовать в записях и на страницах, в специальных форматах и даже в темах оформления WordPress.
После установки в визуальном редакторе появляется инструмент для вставки шрифтовых картинок.
Создаем новый пост. Под заголовком можно увидеть новую кнопку Icons (Иконки). Если вы нажмете на нее, то появится выпадающий список с большим количеством иконок. Остается лишь выбрать нужную и вставить ее в текст.
Если вы хотите использовать подобные иконки в своей теме, то сделать это достаточно просто. Создайте тестовый пост с нужными иконками, а затем переключитесь на текстовый редактор. Скопируйте HTML-код иконок в нужное место темы.
Думаю, что для вас этот вариант решения вопроса с иконками для сайта будет полезен и вы возьмете его к себе на вооружение!
Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!
profwebsit.ru
