Меню Рубрики

Установка wordpress свой шрифт

Три способа подключения пользовательских шрифтов на WordPress-сайт

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

Что такое пользовательские шрифты?

Это понятие мы будем использовать для обозначения любого шрифта, которого нет в WordPress. Для использования выбирайте те, которые соответствуют следующим критериям:

  • Должны быть читабельными.
  • Вписываться в общий дизайн сайта.
  • Должны быть оптимизированными под мобильные устройства.

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

Где найти пользовательские шрифты для WordPress-сайта

Существует множество отличных репозиториев шрифтов. Один из лучших – Google Fonts . Сервис предлагает более 900 бесплатных шрифтов на нескольких языках.

Adobe Fonts ( ранее Typekit ) – это еще одна отличная библиотека, которая содержит более 1700 разнообразных пользовательских шрифтов. Но для доступа к ним потребуется подписка Creative Cloud .

3 способа установить пользовательские шрифты на WordPress-сайт

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

1. Редактирование файла темы

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

После этого появится новое меню с двумя сниппетами кода. Первый выглядит следующим образом:

Разместите приведенный выше код в теге в файле header.php дочерней темы. Он находится в папке используемой темы оформления в каталоге public_html/wp-content/themes .

Этот код загрузит выбранный шрифт из Google Fonts. Но чтобы использовать его, необходимо открыть файл CSS дочерней темы и указать, какие элементы страницы должен использовать новый шрифт. Например:

Помните, что этот CSS-файл должен находиться в том же каталоге, что и файл header.php .

2. Загрузка файла шрифта в папку темы оформления

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

В WordPress нет отдельной папки для шрифтов. Но ее можно создать, используя FTP-клиент . Лучше разместить ее в каталоге с темами оформления , чтобы она была на виду. Затем загрузите файл шрифта в новую папку.

После этого откройте CSS-файл дочерней темы оформления и подключите шрифт следующим образом:

Теперь нужно определить то, какие элементы дизайна страницы будут использовать новый шрифт. Например:

3. С помощью плагина

Самый простой способ реализовать новые функции в WordPress – установить соответствующий плагин. Чтобы использовать Google Fonts, мы рекомендуем установить плагин Google Fonts for WordPress.

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

Чтобы использовать любые файлы пользовательских шрифтов, не ограничиваясь одним репозиторием, обратите внимание на плагин Custom Fonts.

С помощью этого плагина можно загружать пользовательские шрифты на сайт непосредственно из панели администрирования WordPress.

Заключение

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

Данная публикация представляет собой перевод статьи « How to Add Custom Fonts to Your WordPress Site (3 Methods) » , подготовленной дружной командой проекта Интернет-технологии.ру

источник

Как подключить шрифт в WordPress: через CSS, из Google Fonts, в редакторе

Алгоритм состоит из двух шагов. Во-первых, перед тем как подключить шрифт к WordPress сайту вам нужно будет «раздобыть» соответствующий файл шрифтов и загрузить его на хостинг в ту же директорию, где находится style.css. Для работы можете скачать бесплатный FTP клиент Mozilla.

Далее открываете файл стилей style.css и вставляете туда код:

В данном случае вы сначала задаете новый font-family, указывая соответствующий TTF файл, а затем используете его в качестве шрифта для заголовков H1, H2.

Я тестировал код на последних версиях Firefox, IE, Chrome и Opera — все прошло хорошо. Однако, далеко не все старые версии браузеров поддерживают такой код. Следующая статья содержит таблицу совместимости решения, а также полезную информацию о разных проблемах, что могут возникнуть в процессе реализации.

Если же вы хотите охватить все случаи (в том числе и IE 6-8), то придется немного расширить базовый код.

Шрифты Google в WordPress

Наверняка многие из вас знают проект Google Fonts, позволяющий использовать на сайте нестандартную типографику. Давайте рассмотрим как добавить шрифт в вордпресс с помощью данного сервиса. Первым делом заходите на сайт fonts.google.com и выбираете нужный вариант. Далее кликаете по кнопке «Select this font» и внизу страницы появится «панелька» с выбранными фонтами.

При открытии окна увидите инструкцию по интеграции шрифтов Google с сайтом. Во вкладке «Customize» сможете выбрать поддержку кирилицы (если нужно), после чего базовый код вставки немного изменится. Добавляете его в файл шаблона header.php.

После этого для любого класса и элемента в CSS стилях допускается задание соответствующего семейства шрифта, например, для тех же заголовков:

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

Подключение шрифтов в TinyMCE Advanced

Рассмотрим задачу как добавить новый пользовательский шрифт в WordPress редакторе TinyMCE Advanced. Хочется отдельно подчеркнуть, что решение работает именно под данный конкретный модуль, а стандартному текстовому редактору может и не подойти! Также в процессе используем плагин сниппетов Code Snippets (для большей наглядности) — вам не нужно будет вносить правки в functions.php, а сможете сделать это через интерфейс админки. Всего потребуется создать 3 сниппета:

1. Сначала реализуем выбор шрифтов в выпадающем меню TinyMCE Advanced.

2. Затем создаем отображение оформления текста в редакторе.

3. На последнем этапе добавляем импорт стилей внутри WP и на самом сайте. Кстати, первые 2 сниппета можно настроить для работы только в админке, а последний должен быть подключен и в бэкенде, и во фронтенде.

add_action( ‘admin_head-post.php’, ‘cwc_fix_html_editor_font’ ); // add_action( ‘admin_head-post-new.php’, ‘cwc_fix_html_editor_font’ ); add_action( ‘wp_head’, ‘cwc_fix_html_editor_font’ ); function cwc_fix_html_editor_font() < ?>Понравился пост? Подпишись на обновления блога по источник

Как добавить свои кастомные шрифты на WordPress

У вас появилась потребность добавить свои кастомные шрифты на сайт WordPress? Отличная идея! Они действительно помогут разнообразить уже используемую вами тему и внести в нее что-то новое.

А вот как это сделать с помощью шрифтов Google Fonts, Adobe Typekit и метода CSS3 @Font-Face, вы узнаете в сегодняшнем посте.

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

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

Читайте также:  Установка принтера самсунг в убунту

Ну и заодно узнаем, где взять эти самые кастомные шрифты для сайта.

Где найти кастомные шрифты для WordPress?

Раньше шрифты всегда стоили дорого, но теперь все изменилось. Сейчас есть очень много источников, где можно найти отличные бесплатные шрифты, как например, Google Fonts, Adobe Typekit , FontSquirrel и fonts.com .

Тем, кто не знает, как совмещать шрифты, лучше всего воспользоваться источником Font Pair . Он помогает дизайнерам сочетать красивые шрифты Google.

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

Кастомные шрифты Google Fonts

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

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

Внизу этой же страницы есть область встроенного кода. Этот код нужно скопировать и добавить в используемую вами тему в файл header.php сразу после открытия тега head >:

Добавьте следующий код CSS в файл style.css вашей темы. Вот теперь пользовательские шрифты Google можно успешно использовать на своем сайте WordPress:

Кастомные шрифты Adobe Typekit

Еще один не менее полезный бесплатный ресурс кастомных шрифтов, который также имеет и премиум версию. В платной версии все шрифты расписаны более подробно, а в бесплатной – лимитировано.

Заведите аккаунт в Adobe Typekit и создайте свой kit для шрифтов.

Выберите любой шрифт с Typekit и добавьте его в только что созданный kit. Затем скопируйте код вашего kit и вернитесь в админку WordPress.

Теперь нужно установить и активировать плагин Typekit Fonts for WordPress .

После чего в Настройках → Typekit Fonts разместите скопированный код на странице настроек плагина:

Теперь осталось добавить код CSS в файл style.css вашей темы. Вот и все. Теперь шрифты готовы к использованию.

Кастомные шрифты с помощью CSS3 @font-face

Проще всего добавить кастомные шрифты с помощью метода CSS3 @font-face . Этот метод позволяет использовать любые шрифты на вашем веб-сайте. Чтобы ими воспользоваться, необходимо загрузить понравившийся шрифт в веб формате.

Если же у вас нет поддержки веб-формата для какого-либо шрифта, можно конвертировать его с помощью FontSquirrel Webfont generator :

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

Для загрузки шрифтов можно использовать FTP или File Manager. После этого подключаем шрифты в таблице стилей темы с помощью CSS3 @font-face следующим образом:

Не забудьте изменить так называемое семейство ваших шрифтов font-family и URL на ваши собственные и используйте эти шрифты следующим образом:

Однако, загрузка шрифтов прямо с CSS3 @font-face не всегда является лучшим решением с точки зрения нагрузки на ваш сайт. При использовании шрифтов с Google Fonts или Typekit лучше всего, чтобы они загружались напрямую с сервера.

источник

WordPress. Как добавить пользовательский шрифт

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

Если вы хотите добавить пользовательский шрифт на ваш сайт WordPress сначала надо найти и загрузить этот шрифт на компьютер. Например, с этого сайта: http://www.fontsquirrel.com.

Посетите сайт http://www.fontsquirrel.com., и в «Фильтре шрифтов» (‘Font Filter’), выберите ‘Веб-шрифт’ (Webfont):

Выберите понравившийся вам шрифт и скачайте его на компьютер:

Соединитесь с сервером с помощью FTP или Менеджера файлов, перейдите к каталогу ‘wp-content/themes/themeXXXX‘ и создайте там новую папку под названием ‘fonts’. Загрузите скачанный шрифт в эту папку, а затем распакуйте файл(ы). Оригинальный .zip файл после этого можно удалить:

Читайте также:  Установка плагина для ресивера gi s8120

Войдите в панель управления WordPress. Перейдите в раздел Внешний вид (Appearance) -> Редактор ( Editor ) и откройте файл ‘style.css‘ из темы themeXXXX:

Добавьте такой код в конец этого файла ‘style.css‘:

*здесь: название шрифта (fontname) = название, которое вы дадите своему новому шрифту (любое название).

ссылка (link) = прямая ссылка на файлы шрифтов, которые вы загрузили на сервер. (ссылка на сайт + путь к каталогу + название файла шрифтов):

Скопируйте код в последнюю строку файла ‘style.css‘ и удалите вторую строку кода с ‘src‘, а затем добавьте метку !important после названия шрифта:

Вы можете найти класс CSS для конкретного текста с помощью инструмента разработчика:

Замените @font-face классом CSS (селектором CSS), найденным с помощью инструмента разработчика. Затем нажмите ‘Загрузить файл’ (‘Upload File’):

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

Вы также можете воспользоваться детальной видео-инструкцией:

источник

Шрифты для WordPress, как изменить шрифт в wordpress, чтобы он загружались локально

Шрифты для WordPress зачастую загружаются с внешнего источника, например Google Font. Такая ситуация может приводить к ошибкам при тестировании скорости загрузки в таких сервисах как GTmetrix / Pingdom, если загружать шрифты для ВордПресс локально данная ошибка должна пропасть.

Вы не можете управлять некоторыми внешними ресурсами и сценариями, что делает их невозможными для сжатия, минимизации или оптимизации. Это может серьезно повлиять на вашу скорость загрузки WordPress. Одним из наиболее распространенных внешних ресурсов являются для WordPress – fonts, а именно Google Fonts, как мы отмечали выше. Если вы уже сделали оптимизацию WordPress и избавились от медленных плагинов ВордПресс, вы можете начать замечать, что на внешние ресурсы (шрифты для ВордПресс), плагин кэширования никак не влияет. О том как изменить шрифт в WordPress, для его более быстрой загрузки поговорим ниже. Это позволяет вашему к’ш-плагину сжимать все ресурсы, связанные с вашим шрифтом.

Выбрать шрифты для WordPress в Google

В этом примере мы будем использовать шрифт Roboto с двумя весами шрифта: обычный (400) и жирный (700).

Будьте избирательны с весами шрифта — количество весов также влияет на время загрузки. Если вам нужна только жирная версия, снимите флажки с других весов, чтобы шрифты Google загружалиcm только те, которые вам нужны.

Загрузите шрифт Google Fonts

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

Преобразование шрифтов, чтобы добавить шрифт в ВордПресс

Далее мы преобразуем эти файлы шрифтов (.ttf) в файлы веб-шрифтов. Мы будем использовать Transfonter. Перейдите на их сайт, нажмите:

  1. «Добавить шрифты (add fonts)».
  2. Затем загрузите только те типы шрифтов, которые вы будете использовать на своем сайте. В нашем случае Roboto-ttf и Roboto-Bold.ttf. Оставьте настройки по умолчанию, так как WOFF и WOFF2 охватывают все основные браузеры.
  3. Теперь нажмите конвертировать.

После того как процесс конвертации завершиться, загрузите преобразованные файлы шрифтов. Конвертированные шрифты вы можете скачать в zip-файле каждый шрифт будет включать форматы WOFF и WOFF2 (поскольку мы загрузили 2 шрифта, у нас будет всего 4 файла шрифтов, также в архиве присутствует index.html с демо и css файл со стилями).

Загрузка файлов шрифтов в файлы WordPress

Загрузите файлы веб-шрифтов через FTP или cPanel, в идеале в папку wp-content / uploads, чтобы обновления темы и ядра не перетерли их. Мы создал папку «fonts» и загрузил их туда (чтобы отделить их от других файлов). Чтобы подтвердить, что они были успешно загружены, и у вас есть правильные ссылки, откройте ссылки в браузере, и шрифты должны начать загрузку.

источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *