Как добавить шрифт из google fonts. Нестандартные веб шрифты в верстке

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

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

Варианта есть два – подключить плагин, или немного пошаманить с файлом functions.php.

Но сначала хотелось бы перечислить преимущества и недостатки Google Fonts, чтобы вы окончательно решили, использовать их в своих проектах или нет.

Хорошие и плохие Google Web Fonts

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

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

И, наконец, платформа полностью свободна . Чтобы начать использовать шрифты, нужно только авторизоваться или завести почтовый ящик на Gmail (а у кого сегодня нет почты на Gmail?).

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

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

Как установить шрифты Google с помощью плагинов WordPress

Если вы поищете плагины, то первое, что увидите в результатах поиска - плагины WP Google Fonts и Easy Google Web Fonts . Это действительно два лучших плагина.

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

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

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

Правильный путь установки Google Fonts в шаблон WordPress

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

Затем вам нужно выбрать стиль шрифта – нормальный, жирный или курсив. Это вы в состоянии сделать самостоятельно:)

После того, как вы выберете стили, Google даст вам фрагмент кода. Наш выглядит следующим образом:

Кроме того, мы получили CSS стиль:

font-family: "Open Sans", sans-serif;

Теперь пришло время, чтобы открыть файл functions.php (путь к файлу: wp-content/themes/yourtheme). В конце файла добавьте новую функцию:

function load_fonts()
{
wp_register_style("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style("et-googleFonts");
}
add_action("wp_print_styles", "load_fonts");

Ключом этой функции является команда "wp_enqueue_style", которая заставляет WordPress вызывать таблицы стилей шрифта в заголовке каждой страницы. Если вы внимательно посмотрите, то увидите, то мы удалили ссылку href= и rel=’stylesheet’ type’text/css’, из кода, который нам дал Google, и вам нужно будет делать то же самое, если вы хотите добавить любой другой Google-шрифт для вашего сайта на WordPress.

Все, что вам нужно сделать сейчас, это открыть основной файл CSS и вставить стиль с Open Sans. Тут работают обычные правила, поэтому добавьте следующий код в таблицу стилей, сохраните и обновите:

body
{
font: normal 1em "Open Sans", sans-serif;
color: #313131;
}

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

Bold-text
{
font: bold 1em "Open Sans", sans-serif;
}

Как видите, на самом деле все очень просто. Пробуйте и проверяйте результат:)

Отличный источник шрифтов для веб-дизайнеров. В WPBv4 начали использовать популярное сочетание шрифтов Google Font : гарнитуры Oswald и Lora . Некоторые пользователи задавали вопросы относительно того, можно ли использовать шрифты от Google в темах для WordPress и о том, как это сделать. В этой статье речь пойдет о том, как добавлять шрифты Google Web Fonts в темы WordPress правильно и при этом не повлиять на быстродействие вашего сайта.

Ищем шрифты Google Web Fonts, которые вам нравятся

Сначала надо найти те шрифты от Google, которые вам нравятся. Поищите варианты среди предложенных в библиотеке шрифтов под названием Google fonts library . Как только найдете подходящий вариант, кликните на кнопку Quick-use :

После клика на данной кнопке вы окажетесь на новой странице. Прокрутите до тех пор, пока не увидите форму с названием "Add this code to your website ":

Скопируйте код и вставьте его в блокнот, мы будем использовать его позже. Обычно используется как минимум 2 разных шрифта. К примеру, в нашей практике использовались шрифты Oswald + Lora . Так что описанную выше процедуру надо повторить и для второго шрифта.

Добавляем шрифты Google Web Fonts в тему WordPress

Есть три основных способа добавления шрифтов от Google в ваш веб-сайт. К примеру, есть стандартный путь, способ импорта @import и добавление при помощи Javascript . Обычно используют один из двух первых методов.

Самый простой способ - это открыть файл вашей темы style.css и вставить в него следующий код, имеющий отношение к добавляемому шрифту (помните, мы скопировали его в блокнот на первом шаге):

@import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);

Так делают многие (StudioPress , Genesis ). Но, тем не менее, это не совсем корректный метод добавления открытых шрифтов. Использование метода @import блокирует параллельное скачивание, в результате чего веб-браузер будет сначала до конца скачивать файл со шрифтами и только потом продолжит загружать остальной контент вашего веб-сайта. Поэтому, хотя такой способ кажется удобным, это не лучший способ для работы со шрифтом, если вам небезразлична скорость и производительность вашего сайта. Подробности о данных нюансах вы можете прочесть здесь .

Самым лучшим будет объединение запросов к разным шрифтам Google Fonts в один запрос , чтобы избежать избыточного числа HTTP-запросов. Вот как это сделать. Добавляем код:

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

Если даже вы вынуждены использовать @import , по крайней мере объедините множественные запросы в один.

Как добавить шрифты Google Web Fonts без ущерба для производительности сайта

Самым лучшим будет использование стандартного метода , с помощью которого используются ссылки, а не импорт файла. Просто возьмите два адреса URL из первого шага данной инструкции. Объедините 2 разных шрифта, добавив между ними символ | . Затем поместите полученный код в блок head вашей темы. Для этого вам придется отредактировать файл header.php и добавить в него код из таблицы стилей. Должно получиться что-то вроде следующего:

Основная цель - это добавить запрос к шрифту на ранней стадии. Согласно блогу проекта Google Web Fonts , если есть тег скрипта перед объявлением шрифта @font-face , тогда Internet Explorer ничего не будет рендерить на странице, пока не загрузится файл самого шрифта.

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

H1 { font-family: "Oswald", Helvetica, Arial, serif; }

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

К примеру, если посмотреть на страницу Blueprint , команда создала тему WPBv4 как кастомную дочернюю тему от фрейморка Genesis . Давайте посмотрим, как добавлять шрифты Google Web в дочернюю тему на основе Genesis .

Как добавить шрифты Google Web Fonts в дочернюю тему на базе Genesis

Откройте дочернюю тему и ее файл functions.php и добавьте в этот файл следующий код:

Add_action("genesis_meta", "wpb_add_google_fonts", 5); function wpb_add_google_fonts() { echo ""; }

Основное, что надо сделать - это посмотреть на код внутри блока genesis_meta . По умолчанию там заданы параметры наподобие META -описаний, ключевых слов, таблицы стилей, фавиконов и т.д. Указав приоритет 5 , мы убедимся, что таблица стилей будет подгружаться до того, как загрузится основная таблица стилей.

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

Наша последняя подсказка касательно Google Web Fonts на вашем сайте: не задавайте вопросов и не экспериментируйте с теми шрифтами, которые не собираетесь использовать. К примеру, если вам нужен только нормальный и жирный шрифт, не используйте и не настраивайте все остальные возможные стили для конкретного шрифта. Надеемся, что наш пост поможет вам правильно настроить и использовать шрифты Google Web Fonts на вашем WordPress-сайте.

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

Смотрите сами:

Одни шрифты выглядят более убедительно, другие - более интригующе.

Но как подключить любые шрифты к сайту и применять их где захочется?

В этой статье я покажу вам 3 способа , с помощью которых вы сможете подключить любые, самые разнообразные и нестандартные шрифты на свой сайт. И неважно, каким CMS вы пользуетесь: WordPress, Joomla, Drupal или Open Cart.

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

Вы узнаете:

Способ №1. Быстрое подключение шрифтов к сайту на WordPress (cложность: ⭐ ⭐ ⭐)

Если на ваш сайт установлена премиальная тема оформления - вы можете подключить шрифты за 2 минуты.

Например:

Вы хотите изменить шрифт заголовков своих статей. Для этого:

1. В админ-панели перейдите в раздел Theme Options. В зависимости от вашего шаблона этот раздел может называться немного по-другому, но смысл всегда один - "настройки темы".

2. Перейдите в раздел Typography (типография).

3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):

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

Способ №2. Используйте всю силу Google Fonts
(cложность: ⭐ ⭐ ⭐ ⭐)

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

Шаг 1. Перейдите на официальный сайта сервиса.

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

Для того, чтобы сервис показал шрифты с поддержкой русского языка в пункте Languages выберите Cyrillic.

Шаг 3. Представим, вам понравился шрифт Roboto. Нажмите на иконку "+":

Вы можете добавить любые шрифты нажимая на значок "+".

Шаг 4. После этого нужно развернуть корзину с выбранными шрифтами:

Перейдя во вкладку Customize вы можете выбрать начертания и язык. Касательно начертаний, советую выбрать стандартный комплект - нормальный (400), курсивный (400 italic), жирный (700) и курсивно-жирный (bold 700 italic):

Но если вам нужно только жирное начертание (для заголовков), выберите только ее.

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

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

Шаг 5. Вернитесь в раздел Embed и выберите владку @IMPORT. Далее, скопируйте строку кода, содержащую "@import" и вставьте на первую строчку CSS файла вашего сайта:

Если у вас сайт на WordPress, CSS файл скорее всего находится здесь: wp_content/themes/"вашатема"/css/... В папке CSS скорее всего будет файл Fonts, куда и нужно перенести код вставки от Google:

Не важно на каком CMS работает ваш сайт, просто вставьте код, и все будет 👌

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

Определять шрифт для тех или иных элементов сайта вы можете в том же CSS файле.

Например:

Для придания шрифта Roboto всем абзацам я напишу следующее: p { font-family: Roboto;}

Способ №3. Кастомное подключение шрифтов с помощью CSS (cложность: ⭐ ⭐ ⭐ ⭐ ⭐)

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

Где взять веб-шрифты для сайта

А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?

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

Шаг 1. Перейдите на официальный сайт сервиса

Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.

Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.

Например, если есть 4 начертания, будет написано 4 Styles:

Обозначение начертаний шрифтов - нормальный (400/regular), курсивный (italic), жирный (700/bold), жирный курсивный (700 italic).

Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.

Шаг 6. Переходим в раздел Webfont Kit. Выбираем все форматы шрифтов и жмем на Download @FONT-FACE KIT. Если доступно всего 1-2 формата, не страшно.

Для подключения шрифтов используем @Font-face

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

Плюсы:

Через CSS вы можете подключать шрифты любых форматов: ttf, otf, woff, svg.
Файлы шрифтов будут находится на вашем сервере - вы не будете зависеть от сторонних сервисов.

Минусы:

Для правильного подключения шрифта для каждого начертания нужно прописывать отдельный код.
Не зная CSS можно легко запутаться.

Вы можете просто скопировать мой готовый код и где нужно указать свои значения.

Шаг 1. Перенесите файлы скачанных шрифтов на ваш сайт. Это можно сделать через панель управления вашего хостинга или через FTP.

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

Шаг 2. Пропишите в самом начале CSS файла следующую запись:

@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") format("eot"),
url("../fonts/WebFont.woff") format("woff"),
url("../fonts/WebFont.ttf") format("truetype"),
url("../fonts/WebFont.svg#webfont") format("svg");
font-weight: normal;
font-style: normal;
}

Где MyWebFont - это название шрифта, а значение свойства src (данные в скобках в кавычках) - их месторасположение (относительные ссылки). Нам нужно указать каждое начертание отдельно.

Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.

Шаг 3. При подключении курсивного начертания, пропишите следующее:

@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic.woff") format("woff"),
url("../fonts/WebFont-Italic.ttf") format("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") format("svg");
font-weight: normal;
font-style: italic;
}

Где все то же самое, только свойству font-style мы придали значение italic.

Шаг 4. Для подключения жирного начертания, добавьте следующий код:

@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Bold.woff") format("woff"),
url("../fonts/WebFont-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
font-weight: bold;
font-style: normal;
}

Где свойству font-weight мы задали значение bold.

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

Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:

@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic-Bold.woff") format("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
font-weight: bold;
font-style: italic;
}

Ну вот и все:) Только что вы подключили 4 начертания шрифта на свой сайт.

Но есть одна ремарка - данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало.

Как подключать шрифты для сайтов на разных CMS

Неважно, на каком движке ваш сайт (WordPress, Joomla, Drupal, Opencart) - если у вас есть доступ к CSS файлу, вы можете подключить шрифты как через Google Fonts, так и закачав их на свой сервер через Fontsquirrel.

Ну вот и все. Если вы считаете, что эта статья может быть полезна другим вебмастерам - поделитесь ею в социальных сетях.

А также:

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

Узнавать обо всем самостоятельно - непросто, но очень интересно. Если у вас есть хотя бы поверхностное представление о том, как работает сайт, то для реализации своего проекта лучше заниматься им самостоятельно. При этом вы не просто сэкономите кучу денег, но и узнаете много «фишек», секретов и т. д. Использование шрифтов Google обычно не привлекает внимание, хотя благодаря им блог может стать в разы интереснее.

Сервис

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

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

Внешний вид

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

Теперь же разработчики сделали упор на Material Design. Все приобрело утонченные черты. Внешний вид стал «легче». Стала заметна тонкая анимация, интерактивность. Ничего больше не отвлекает внимание от выбора нужного шрифта Google Fonts.

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

Возможность

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

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

Избранные

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

Просмотр

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

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

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

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

Подключение

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

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

Нажимаете на этот блок и далее настраиваете его. Тут можно выбирать начертания и нужный алфавит. Если вам нужны шрифты Google кириллицы, тогда отмечаете строку Cyrillic. После будет сформирована ссылка. Её можно найти в этом же окошке на вкладке Embed. Достаточно просто скопировать её либо же использовать полный код HTML.

Обычно в настройках сайта есть установка шрифтов и цвета. Там есть стандартные варианты, а можно добавить расширенные. В них находится отдельный вариант для Google Fonts. Если у вас тогда нужно загружать шрифты через плагин Supreme Google Webfonts.