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

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

Как известно, стандартный набор, поддерживаемый любым браузером, состоит из Arial, Verdana, Times New Roman, Georgia, Trebuchet MS, Courier New, Comic Sans MS и еще нескольких вариантов, которые предустановлены практически по всех операционных системах компьютеров пользователей. Более подробную информацию для различных ОС вы можете посмотреть .

Шрифты из онлайн сервисов для компьютера и сайтов

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

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

Смена браузера не привела к изменению сложившейся ситуации и я подумал, что, скорее всего, дело в шрифтах. Для этого я зашел в их настройки, выбрав пункт одноименный пункт в «Панели управления» Windows (обычно она живет в меню кнопки «Пуск»). Хотя можно было просто зайти через проводник в папку C:WINDOWSFonts.

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

Для скачивания шрифтов я обычно использую онлайн сервис Xfont.ru , где имеется алфавитный указатель и строка поиска (те, кто пришел почитать про Google Font, прокрутите страницу чуток ниже или чуток подождите, пока расскажу основы).

Собственно, используете поиск в Xfont и переходите на страницу с нужным вам шрифтом, где жмете на кнопку Скачать. При этом вы получаете уже готовый к установке файл. Обычно они имеют расширения либо.ttf (TrueType — удобны тем, что на экране и на печати выглядят одинаково), либо.otf (OpenType), либо.fon.

Теперь через проводник или панель управления заходите в папку Fonts (C:WINDOWSFonts) и щелкаете правой кнопкой мыши по пустому месту. Из контекстного меню вам нужно будет выбрать самый нижний пункт «Установить шрифт» .

Ну, а в открывшемся окне находите только что скачанный файл, выделяете его и жмете на кнопку «Установить»:

Собственно, все. Нажмите F5 для обновления списка в папке Font и увидите новичка. Для появление его в ваших программах типа Ворд или Фотошоп ничего дополнительно делать не нужно, разве что только перегрузить эти программы, если на момент установки шрифта они были открыты. В общем, с этим делом никаких сложностей возникнуть не должно — скачали, установили и можно пользоваться.

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

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

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

Font-family:Arial, Helvetica, sans-serif;

Font можно записать и в виде сборного правила, например, так:

Font:bold 11px Arial, Helvetica, sans-serif;

В обоих случаях, если на компьютере пользователя не будет установлен Arial (и такое бывает), то будет использоваться для отображения нужного участка текста Helvetica, а если и он на компьютере посетителя будет отсутствовать, то возьмется любой из семейства Sans Serif (без засечек), найденный среди установленных шрифтов у этого посетителя вашего ресурса.

Но это все же по большей степени компромисс. Однако, безвыходных ситуаций не бывает, и тут на сцену выходит относительно недавно появившийся онлайн сервис от всеми нами уважаемого и любимого Гугла ().

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

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

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

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

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

Сам по себе Google Font API абсолютно бесплатный и динамично развивающийся в направлении увеличения количества поддерживаемых красивых, необычных и вычурных шрифтов, которые распространяются по свободной лицензии, и сам по себе данный способ их подключения к сайту будет кроссбраузерным по умолчанию.

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

Google Font — русские шрифты для компа и код для сайта

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

Русских шрифтов там уже достаточно много (в районе пяти десятков), но лиха беда начала. Думаю, что со временем вам будет из чего выбрать, хотя набор латинских вариантов в Гугл Фонте уже сейчас впечатляет (более шести сотен).

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

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

В результате откроется окно, где сможете скачать все выбранные вами русские (или латинские, но главное, чтобы красивые) шрифты, запакованные в один Zip архив. На своем компьютере вы его распакуете и проведете установку в соответствие с описанным выше алгоритмом.

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

Как я уже говорил выше, все это великолепие можно будет прикрутить к своему сайту. Представьте, как будет выделяться ваш проект, если его заголовки будут выводиться рукописным шрифтом или еще каким-то образом отличающимся от принятых по стандарту Arial, Verdana, Times New Roman, Georgia, Trebuchet MS, Courier New или Comic Sans MS. Во всяком случае, попробовать стоит.

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

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

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

Итак, коллекция собрана. Теперь щелкаете по кнопке «USE» в правом нижнем углу:

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

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

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

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

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

1. Самый очевидный из них первый, который реализуется с помощью (служебной гиперссылки). Его нужно будет вставить в шаблон вашего ресурса в область между открывающимся и закрывающимся тегом HeaD (читайте подробности чуть ниже).
2. Второй вариант предлагает использовать директиву , которую надо будет дописать в ваш стилевой файл. В общем то, метод этот современный и по приведенной ссылке вы можете посмотреть наглядный пример использования @import при блочной верстке простейшего макета.
3. Третий вариант предлагает вам использовать код ДжаваСкрипта, который опять же можно будет вставить в область между открывающимся и закрывающимся тегом HeaD, либо вынести в отдельный файл скриптов.js, если понимаете о чем я говорю. В серии статей про я писал, что один общий файл стилей был бы полезен.

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

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

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

Для быстрых экспериментов советую попробовать использовать , который нужно будет вставить в нужный тег. Например, я вставил его в код одного из заголовков этой статьи и прописал в него предложенное в Google Font CSS свойство:

Текст заголовка, где оперативно меняем шрифт

И, конечно же, я подключил нужный онлайн шрифт (Stalinist One) с помощью добавления строки:

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

Однако, сейчас я убрал служебную гиперссылку Link из файла header.php, но идущий вслед за этим абзацем заголовок все равно использует шрифт «Stalinist One» подгружаемый с Google Font. Как так получилось? Просто я в начало статьи вставил этот самый Link — в тексте он никак не отображается, но нужный фонт с Гугла исправно подгружает. И еще я добавил ему наклон через font-style.

Так что Гугл фонтами можно использовать и локально, а не для всех страниц проекта.

Как установить красивые онлайн шрифты на сайт?

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

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

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

Wp-content/themes/название темы WordPress

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

");">

Вам может быть интересно

Они могут загружаться в виде плагина Supreme Google Web fonts, который является наиболее удобным в данном случае. После добавления плагина в админку, в меню визуального редактора добавляется панель выбора шрифтов. Это очень удобно, так как не нужна никакая установка шрифтов и не нужно никаких дополнительных активаций. После того, как в визуальном редакторе появится список шрифтов, администратор сможет форматировать текст таким же простым образом, как и в текстовом редакторе, выделив нужный фрагмент и назначив ему определенный вид. Текст будет прописан выбранным шрифтом.

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

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

Open Sans

Ещt один шрифт - это Open Sans. На сайте Google Web Fonts шрифт доступен для свободного скачивания. Название этого шрифта будет звучать правильно с ударением на последний слог. Такой шрифт подойдут для выделения ключевых фраз в текстах, создания заголовков, названий разделов.

Oswald – это еще один известный кириллический шрифт. Cегодня этот шрифт используют довольно часто. Он вполне читабельный и достойно смотрится, как в крупном, так и в мелком формате.

Source Sans Pro

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

Кириллический шрифт Merriweather - обычный тип шрифта. Большинство символов этого шрифта прекрасно отображаются на ЖК мониторах. По насыщенности этот шрифт просто отличный.

Open Sans Condensed

Шрифт Open Sans Condensed - шрифт из кириллического семейства шрифтов. Привлекателен, читаем, безупречен.

Lora

Lora – еще один кириллический Google Font. Отличается неповторимым контрастом между толстыми и тонкими элементами в начертании букв. Такой шрифт можно назвать очень женственным. Шрифт также доступен для свободного скачивания и представлен в одном стиле.

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

Exo 2

Exo 2 – еще один очень интересный кириллический шрифт. Имеет аж 18 стилей, а потому использовать его можно практически повсеместно.

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

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

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

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

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

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

Готовы добавить интересные шрифты в WordPress? Тогда давайте начнем.

Что такое Google Fonts?

Прежде чем мы перейдем к техническим аспектам, давайте сначала поговорим о том, что же представляют собой шрифты от Google?

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

Краткая история веб-типографии

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

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

• использование Flash или (отдельных) изображений писем для формирования текста.

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

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

Определение Google fonts

Многое изменилось, когда сервис Google Fonts был представлен в 2010 году. Хотя это не первый сервис такого плана (Typekit появился раньше), Google Fonts стал первой популярной библиотекой для веб-шрифтов.

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

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

Звучит неплохо, правда? Теперь, если вы хотите знать, как использовать Google Fonts на своем веб-сайте под управлением WordPress, просто продолжайте читать. Сейчас мы все рассмотрим.

Как вручную добавить шрифты Google в WordPress

Есть несколько способов добавить Google Fonts на свой сайт. Мы рассмотрим каждый из них, все они начинаются одинаково.

1. Подберите нужный шрифт

Самый первый шаг — перейти на веб-сайт Google Fonts и выбрать шрифт.

Если вы ищете какой-то конкретный шрифт, самый простой способ — это искать его по имени в правом верхнем углу (search).

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

• Serif — шрифт с засечками. Times New Roman — хороший пример.
• Sans-Serif — это простые шрифты без засечек. Взгляните на шрифт, который используется на этом сайте, чтобы понять, о чем речь. Open Sans — яркий пример.
• Display — можно использовать на большом экране, например заголовки (h1-h6).
• Handwriting — рукописные шрифты.
• Monospace — Шрифты с одинаковым интервалом. Были популярны в конце 80-х.

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

Если этого недостаточно, вы также можете искать шрифты по стилю. Есть несколько вариантов:

• Количество стилей — сколько различных вариантов стиля предлагает шрифт.
• Толщина — от очень тонких букв до очень толстых.
• Наклон — обычный или курсив.
• Ширина — Поиск по расстоянию между буквами и символами.

Замечательная вещь: Google Fonts имеет функцию предварительного просмотра.

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

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

2. Выберите шрифт

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

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

3. Выберите Стили и дополнительные наборы символов

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

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

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

В моем примере я выбираю вариант regular 400 моего шрифта.

4. Вставить (EMBED) шрифты на свой сайт WordPress

После этого пришло время вставить шрифты на свой сайт. Существует несколько вариантов сделать это, но все они начинаются в разделе «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.

Теперь все, что вам нужно сделать, это скопировать полученный код (без скобок