// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>

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

Как подключить шрифт из Google Fonts

Шаг 1 — выбираем шрифт

Сервис Google Fonts имеет большой набор веб шрифтов, которые можно подключить к проекту одной строкой, и сразу же использовать в CSS стилях. Чтобы выбрать для просмотра только кириллические шрифты, в фильтре слева в параметре Script необходимо выбрать значение Cyrillic (для кириллицы) или Cyrillic Extended (для расширенной кириллицы). После этого справа будут показаны шрифты поддерживающие кириллицу.

Для быстрого использования нажимаем на кнопку Quick Use.

Шаг 2 — настраиваем параметры шрифта

На следующей странице выбираем какие начертания шрифта будем использовать. У шрифта OpenSans это 10 начертания, от очень тонкого, до экстра жирного. Чем больше начертаний выбрано — тем больше это будет влиять на скорость загрузки страницы. Поэтому стоит подключать только используемые шрифты. После можно выбрать наборы символов, для кирриллицы выбираем Cyrillic Extended или Cyrillic, и Latin.

Шаг 3 — код для подключения шрифта

После берем строку кода для подключения на свой сайт. Вариант Standard — подключение стороннего css файла из html, на вкладке @import — будет строка для подключения через css файл, и третий вариант для Javascript. После этого подключение готово и можно использовать данную гарнитуру шрифта в верстке. В блоке ниже показан пример как обращаться к шрифту: font-family: "Open Sans", sans-serif;

Ширину выставляем через параметр font-weight: 300; или font-weight: 400; font-weight: 800; Курсив — через font-style: italic; .

Пример использования

В итоге, если мы выбрали подключение шрифта через @import в CSS, наш CSS файл будет выглядеть вот так:

/* Подключение шрифта*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); /* Определяем стиль для заголовка h1 */ h1{ /* В качестве гарнитуры выбираем подключенный шрифт"Open Sans" */ font-family: "Open Sans", sans-serif; /* Толщину кегля выбираем 300, что будет соответствоваьт начертанию Light - для тонкого кегля*/ font-weight: 300; }

Всем здравия! Сегодня я хочу рассказать вам, как использовать Google Fonts API , чтобы вставлять нужные вам шрифты.

Слева вы можете видеть фильтр , а справа примеры самых разных шрифтов. Выберите любой, который вам понравится. Дальше нажмите на кнопку quick-use .

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

К примеру, выберем нормальный(400) и жирный(700) стиль.

Ниже, под цифрой 3 , вы можете найти код для вставки. Я предпочитаю выбирать подключение к файлу стилей, так что я нажму на вкладку @import . Скопируйте этот код.

Теперь создадим файл index.html с параграфом текста.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, officia?

Подключим нашу таблицу стилей в теге head

И в таблице стилей, в начале файла, вставим скопированный код.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

Я выбрал шрифт Open Sans в качестве примера. Он самый первый.

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

P { font-family: "Open Sans", sans-serif; }

Все! Теперь вы можете радоваться новому шрифту!

Но не забываем, что мы также выбирали и жирный стиль. Чтобы его применить, достаточно прописать font-weight с тем числом, которое вы выбрали на сайте. В моем случае - 700 .

P {
font-family: "Open Sans", sans-serif;
font-weight: 700;
}

Также, как и жирность, можно применять и курсивный стиль, если вы его выбрали на сайте.

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

Итак, на этом все. Спасибо за внимание и до скорого!

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

Для начала давайте перейдем к сайту Google Web Fonts и выберем шрифт, который нам необходимо применить в теме. С помощью специальных инструментов, расположенных с левой стороны, можно сузить область поиска, поскольку шрифтов действительно много. Я знал, что мне требуется жирный serif шрифт для заголовков и названия блога, потому я выбрал serif в выпадающем меню Categories и затем переместил слайдер Thickness (толщина) вправо.

В итоге 617 предложенных мне вариантов плавно отсеялись до 5. У вас есть довольно много опций, чтобы выполнить предварительный просмотр шрифтов – вы можете посмотреть, как будет выглядеть слово, предложение, абзац текста или постер в выбранном шрифте. Вы можете выбрать предварительно заданный текст, можете задать свой собственный текст, выбрать необходимый размер шрифта.

Как только вы нашли шрифт, который вы желаете использовать на своем сайте, просто нажмите на кнопку Add to Collection.

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

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

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

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

Теперь мы переходим к третьему шагу, который уже не такой простой, как предыдущие. На третьем шаге мы получаем код, который необходимо добавить к нашим сайтам – три разных варианта. Выбираем вариант Standard – однако мы несколько отклонимся от инструкций Google, чтобы поддержать устоявшиеся методы добавления стилей к WordPress темам. В коде для стандартного варианта копируем только URL, который указан как href атрибут для тега link.

Затем открываем файл темы functions.php. Мы создадим функцию для того, чтобы загрузить CSS, который мы будем использовать в нашей теме:

Function ggl_load_styles() { }

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

Теперь в этой функции нам нужно зарегистрировать нашу таблицу стилей, полученную от Google:

Function ggl_load_styles() { if (!is_admin()) { wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); } }

Мы используем функцию wp_register_style. Первый аргумент – это дескриптор, т.е. сокращение, которое мы можем использовать для обращения к этой стилевой таблице в дальнейшем в нашем коде. Второй аргумент – это путь к файлу. Мы используем URL, который мы получили на третьем шаге Google-инструкций.

Далее мы подключаем нашу основную стилевую таблицу для нашей темы. Надеюсь, вы не разместили тег link в разделе head вашего файла header.php? Если так, то вернитесь к файлу и удалите этот код. Затем подключите стилевую таблицу в файле functions.php:

Function ggl_load_styles() { if (!is_admin()) { wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl", get_stylesheet_uri(), array("googleFont")); } }

Мы используем функцию wp_enqueue_style. Она имеет те же самые аргументы, что и wp_register_style. Сначала мы привязываем к нашей стилевой таблице дескриптор. Затем получаем путь к нашей таблице стилей. К счастью, в WordPress получить путь можно через функцию get_stylesheet_uri(). После чего мы указываем зависимости. Наш файл style.css зависит от стилевой таблицы Google Web Fonts.

Наконец, мы используем хук wp_enqueue_scripts для вызова нашей функции:

Function ggl_load_styles() { if (!is_admin()) { wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl", get_stylesheet_uri(), array("googleFont")); } } add_action("wp_enqueue_scripts", "ggl_load_styles");

С файлом functions.php покончено. Теперь нам осталось сделать последний шаг, чтобы использовать выбранный шрифт. Четвертый шаг в инструкциях Google показывает, какие значения мы должны передать к свойству font-family для использования нашего шрифта. Я хочу сделать все мои заголовки шрифтом Holtwood One SC:

H1, h2, h3, h4, h5, h6 { font-family: "Holtwood One SC", serif; }

А описание сайта хочу сделать шрифтом Rouge Script:

Site-description { font-family: "Rouge Script", cursive; }

Все! Больше ничего делать не требуется! Вы добавили шрифты Google Web Fonts к своей теме WordPress. Используйте их ответственно!

Приветствую вас уважаемые читатели. Сегодня мы поговорим о google шрифтах (google web fonts), от том как их скачивать и подключать к сайту.

Идем на сайт www.google.com/fonts/ , в фильтре справа выбираем: 1. нужную категорию, 2. при необходимости сортируем их и 3. выбираем нужный нам язык (если нужен русский шрифт в меню слева выберите Cyrillik ).

Итак мы выбрали шрифт, теперь нужно выбрать его начертания, для этого разверните панельку снизу (Open selection drawer ) и перейдите во вкладку CUSTOMIZE и выберите нужные вам начертания и языки.

Для того чтобы скачать нажмите на кнопку donwload.

Подключение скачанного шрифта

Скопируйте содержащиеся в архиве шрифты в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Стандартное подключение скачанных шрифтов выглядит так

@font-face { font-family: "Имя_шрифта_любое"; src: url("Имя_файла_шрифта.eot"); src: url("Имя_файла_шрифта.eot?#iefix") format("embedded-opentype"), url("Имя_файла_шрифта.woff") format("woff"), url("Имя_файла_шрифта.ttf") format("truetype"), url("Имя_файла_шрифта.svg#DSNoteRegular") format("svg"); font-weight: normal; font-style: normal; }

В моем случае подключение будет выглядеть так

/* Код для подключения шрифта в /css/style.css */ @font-face { font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; }

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

1. STANDARD

Данный код нужно добавить в секцию вашего HTML-документа.

2. @IMPORT

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Важно. В не зависимости от способа подключения, для определения этих семейств используйте следующие CSS правила: font-family: ‘Roboto’, sans-serif; об этом будет еще ниже.