Добрый день, уважаемые читатели! Каждый владелец сайта хочет, чтобы его проект был уникальным. Никто не хочет, чтобы у него был стандартный макет, как у всех, поэтому используют различные способы для выражения своего собственного стиля и индивидуальности на своем веб-сайте.
Одним из самых простых способов для придания веб-сайту собственного неповторимого стиля и уникальности является использование нестандартных . В конце концов, текст составляет большую часть страницы и является важным элементом веб-дизайна.
К счастью, Google Fonts предоставляет большое количество веб-шрифтов, которые могут использовать все. Это потрясающая возможность, и владельцы многих веб-сайтов должны ею воспользоваться.
Не знаете, что такое Google Fonts? Не волнуйтесь, для начала мы подробно рассмотрим ее. После этого покажем вам, как можно вручную добавить шрифты от Google на свой сайт под управлением WordPress, а затем сделать то же самое с помощью плагина.
Готовы добавить интересные шрифты в WordPress? Тогда давайте начнем.
Прежде чем мы перейдем к техническим аспектам, давайте сначала поговорим о том, что же представляют собой шрифты от Google?
Google Fonts — это сервис, через который Google предоставляет бесплатный доступ к библиотеке шрифтов для всех. Чтобы понять, почему это важно, давайте быстро пробежимся по истории веб-шрифтов.
Чтобы понять важность шрифтов Google, вам нужно знать, что раньше не было каких-то специальных шрифтов для веб-сайтов, т.е. не было единого стандарта Вместо этого отображение текста на сайте зависело от браузера.
Позже, веб-мастера получили возможность контролировать типографию до определенной степени. Однако, выбор был невелик и был ограничен небольшим набором основных шрифтов, которые должны были быть установлены на компьютере конечного пользователя. Из этого положения был выход, но зачастую такие решения были громоздкими:
Только когда появился CSS2, веб-браузеры получили возможность подгружать шрифты с веб-сайтов. Однако, для того, чтобы он работал, веб-мастеру приходилось приобретать шрифт, который ему был нужен.
У этого способа есть и свои минусы — приобретаемые шрифты могут попасть в свободный доступ. Короче говоря, использование пользовательских шрифтов на веб-сайтах было дорогостоящим и / или сложным.
Многое изменилось, когда сервис Google Fonts был представлен в 2010 году. Хотя это не первый сервис такого плана (Typekit появился раньше), Google Fonts стал первой популярной библиотекой для веб-шрифтов.
Наиболее очевидной причиной такой популярности является тот факт, что вся типографика внутри библиотеки доступна по бесплатной лицензии. В наличии уже более 800 шрифтов.
Во-вторых, использование шрифтов происходит удобно и просто. Самое приятное: вам даже не нужно загружать шрифт на свой сервер. Вместо этого вы можете просто переадресовать браузер пользователя на Google, и он получит шрифт непосредственно от них.
Звучит неплохо, правда? Теперь, если вы хотите знать, как использовать Google Fonts на своем веб-сайте под управлением WordPress, просто продолжайте читать. Сейчас мы все рассмотрим.
Есть несколько способов добавить Google Fonts на свой сайт. Мы рассмотрим каждый из них, все они начинаются одинаково.
Самый первый шаг — перейти на веб-сайт Google Fonts и выбрать шрифт.
Если вы ищете какой-то конкретный шрифт, самый простой способ — это искать его по имени в правом верхнем углу (search).
Если вы еще не знаете и просто хотите просмотреть библиотеку или получить вдохновение, вы также можете применить фильтр со множеством параметров. Во-первых, вы можете фильтровать шрифты по категориям:
Другие параметры для сортировки — это тенденции или популярные шрифты, дата добавления или имя по алфавиту. Вы также можете ограничить свой поиск шрифтами, которые включают специальные символы, например, кириллицу.
Если этого недостаточно, вы также можете искать шрифты по стилю. Есть несколько вариантов:
Замечательная вещь: Google Fonts имеет функцию предварительного просмотра.
Для этого просто щелкните в поле, где отображается шрифт, и введите все, что хотите. Другой вариант — использовать раскрывающееся меню для просмотра всех вариантов: только цифры, случайный абзац или предложение.
В моем случае, я собираюсь получить шрифт, который мне нравится по имени Roboto. Поскольку я знаю, что мне надо, я могу просто найти его по имени.
После того, как вы определились со шрифтом, нажмите на знак плюса в верхнем правом углу, чтобы добавить его в свой выбор. Ваш выбранный шрифт появится в новом меню в нижней части экрана.
Обратите внимание, здесь также можно добавить дополнительно несколько шрифтов и семейств шрифтов. Выбрав нужный шрифт, нажмите на нижнюю панель, чтобы открыть ее.
В открывшемся окне уже содержится необходимая информация о том, как добавить шрифты на ваш сайт. Тем не менее, прежде, чем мы перейдем к этому, сначала необходимо выбрать стили, которые нам нужны. Для этого нажмите «CUSTOMIZE».
В этом разделе отметьте флажками стили, а также коллекции языков / специальных символов, которые вам нужны на вашем сайте.
Имейте в виду, что чем больше вы добавите вариантов, тем больше будет нагрузка на сайт. Индикатор времени загрузки в верхнем правом углу Load Time покажет вам, насколько сильно ваш выбор повлияет на скорость загрузки вашего сайта.
В моем примере я выбираю вариант regular 400 моего шрифта.
После этого пришло время вставить шрифты на свой сайт. Существует несколько вариантов сделать это, но все они начинаются в разделе «EMBED» интерфейса Google Fonts.
Отсюда мы можем вставлять наши шрифты с помощью CSS, HTML или функции WordPress. Хотя последний — рекомендуемый способ, я покажу вам, как делать и другие.
a) Добавление пользовательских шрифтов в WordPress с помощью @ font-face
С помощью оператора CSS @ font-face вы можете указать браузеру, чтобы он загружал шрифты, расположенные непосредственно на вашем собственном сервере.
Это означает, что для использования этого метода вам сначала необходимо скачать шрифт, который вы выбрали из Google Fonts, и загрузить его на свой сервер по FTP.
После этого вам нужно закачать файлы на ваш сервер. Удобный путь — создать папку шрифтов в папке вашей (дочерней) темы. Как только вы разместите их там, вы можете вызвать шрифты следующим образом:
@font-face { font-family: Roboto; src: url("http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Regular.ttf") format("truetype"), url("http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Italic.ttf") format("truetype"), url("http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Light.ttf") format("truetype"); }
@font-face { font-family : Roboto ; src : url ("http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Regular.ttf" ) format ("truetype" ) , url ("http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Italic.ttf" ) format ("truetype" ) , url ("http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Light.ttf" ) format ("truetype" ) ; |
Ряд проблем: для лучших результатов вам, возможно, придется добавлять шрифты в нескольких форматах. Хотя большинство современных браузеров могут иметь дело с файлами.ttf (True Type Fonts). По этой причине это не совсем рекомендуемый метод.
b) Вызов шрифтов с помощью CSS. Использование @import
Второй вариант добавления пользовательских шрифтов в WordPress заключается в том, чтобы загрузить их в таблицу стилей с помощью @import. Этот метод похож на @ font-face, однако вместо загрузки шрифта с вашего собственного сервера вы вызываете его из другого места (в данном случае используя Google-fonts).
Настройка очень проста, поскольку Google предлагает готовое решение. Просто нажмите @import, чтобы получить необходимый код CSS.
Теперь все, что вам нужно сделать, это скопировать полученный код (без скобок