Как использовать загруженные шрифты в WordPress без плагина

Google Fonts - замечательный ресурс. До того, как он получил такое широкое распространение, создание веб-сайтов с уникальными шрифтами было настоящей болью. Теперь, однако, с помощью нескольких щелчков мышью и одного фрагмента кода ваш веб-сайт переходит с Helvetic-eh на Helvetic-awesome . Но что, если ваш любимый шрифт не входит в семейство шрифтов Google Fonts? Вам нужно знать, как использовать загруженные шрифты, потому что вы открыли фантастический хипстерский шрифт, который говорит с душой вашей бороды.

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

Теперь я хочу отметить, что вы можете сделать это через плагин. В репо есть несколько. Но зачем нам это делать? Я из тех парней, которые предпочитают избегать использования плагинов, когда несколько строк кода будут делать то же самое. Избыточные плагины вызывают массу ненужных HTTP-запросов и замедляют работу вашего сайта.

Итак, мы собираемся импортировать эти шрифты вручную - как будто это снова конец 90-х. Ооо, да.

Выбор и загрузка шрифта

Я большой поклонник обзоров шрифтов. В Elegant Themes есть масса, которую вы можете просмотреть, чтобы увидеть, что вам нравится. Так что ударьте по некоторым из них и посмотрите, что вам нравится.

• Рукописные шрифты
• Ретро Шрифты
• Высококлассные шрифты
• Курсивные шрифты
• Хипстерские Шрифты
• Веселые шрифты

Что касается меня, я использую шрифт Aventura из обзора Hipster.

Ваш первый шаг - найти ссылку для загрузки шрифта и сохранить файл на свой компьютер. Скорее всего, это будет файл .zip, содержащий файлы различных форматов. Самые распространенные из них - это .ttf (шрифт TrueType) или .otf (шрифт OpenType).

Создание веб-шрифта (вроде необязательно, но не совсем)

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

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

FontSquirrel также хорош тем, что предоставляет вам необходимый CSS для импорта их на ваш сайт. Как вам это удобно? Вы просто скопируете и вставите его (о чем мы поговорим ниже).

Загрузка шрифта в WordPress

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

Если вы не знаете информацию о FTP вашего хоста, зайдите в cPanel и посмотрите в разделе « Файлы» -> «Учетные записи FTP» .

Здесь вы увидите все учетные записи FTP для хоста, а также увидите ссылку « Настроить FTP-клиент» рядом с каждой из них.

Когда вы заходите туда, cPanel предоставляет вам информацию о сервере или файл FileZilla (и другие), который вы можете импортировать, чтобы установить свои учетные данные. Я лично использую руководство, но вы делаете то, что вам нравится. Даже если вы используете файл, вам понадобится пароль для входа в систему, поэтому оба метода безопасны и надежны.

Теперь, когда вы вошли на свой хост через FTP, перейдите в папку / wp-content вашего сайта. Поскольку это контент для вашего сайта WordPress, почему бы вам не разместить его там? Не стесняйтесь размещать его где угодно, даже в / wp-content / uploads . Ты делаешь это.

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

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

Использование вашего шрифта с CSS

Теперь ваш шрифт загружен и надежно закутан в теплое удобное одеяло wp-content. Пришло время добавить в вашу тему необходимый импорт CSS.

Перейдите в каталог своей дочерней темы (вы ведь используете дочернюю тему, верно?) В своем FTP-клиенте и найдите файл style.css , щелкните его правой кнопкой мыши и выберите «Просмотр / редактирование», чтобы открыть его в текстовом редакторе по умолчанию.

Если у вас нет дочерней темы, используйте Orbisius Child Theme Creator, чтобы сделать это очень быстро. После этого вы можете удалить плагин. Я люблю эту вещь.

@ font-face

Используемый нами код взят непосредственно из FontSquirrel (вы можете написать свой собственный или скопировать / вставить пример ниже), и все, что я изменил, - это путь загрузки URL-адреса, чтобы включить / wp-content . Все остальное - это то, что предоставил генератор веб-шрифтов.

Все, что делает этот сценарий @ font-face , - это сообщает таблицам стилей вашего веб-сайта: «Эй, чувак, я помещаю этот новый шрифт сюда, если ты захочешь его когда-нибудь использовать». Знаете, примерно так же, как вы, когда приносите домой кексы и рассказываете людям, с которыми живете.

Без @ font-face , если вы попытаетесь вызвать font-family: 'aventurabold'; с помощью CSS ваш сайт не сможет его найти, потому что ему никогда не сообщается, где вы его храните.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

Теперь все, что вам нужно сделать, это зайти в свой custom.css (или, если вы используете Divi, Divi -> Параметры темы -> Пользовательский CSS в панели навигации панели управления WP).

Вы просто добавляете стиль CSS, как и для любого другого шрифта. Я просто заменил шрифты Google «Roboto» и «Exo», которые я использовал, на «aventurabold» , и все пошло хорошо (благодаря импорту @ font-face выше).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

Плоды наших трудов

Вот как это выглядело раньше:

И вот что произошло после того, как я добавил Aventura в CSS:

Ура! Оно работает! Молодец! Идите к нам!

Хорошо выглядишь, Friendo

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

И это, друзья мои, действительно делает вас могущественными.

Итак, какой ваш любимый шрифт для использования в Интернете, кроме шрифта Google? Расскажите в комментариях!

Миниатюрное изображение статьи размером 32 пикселя / shutterstock.com