Как добавить шрифт из google fonts

Спонсор материала.
Кондиционеры в интернет-магазине http://www.technodom.kz/catalog/konditsionery . Кондиционеры — лучшие товары, кредитование, огромный выбор, безупречный сервис.

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

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

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

Стандартные шрифты:

Cufon и @font-face

Ранее я уже писал про , с помощью которого можно подключать не стандартные шрифты к сайту. А сейчас рассмотрим более простой способ — это правило @font-face в css и подгрузкой самого шрифта с хранилища шрифтов Google Fonts.

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

В любом случае Cufon и @font-face уменьшают скорость загрузки сайта, хоть и не значительно.

Использование Google Fonts на сайте

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

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

Выбор шрифта в репозитории

Чтобы не пугались, объясню — репозиторий это хранилище, но по-буржуйски:). И так, заходим на http://www.google.com/fonts/ и смотрим для себя подходящий шрифт:

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

Word — отображение нескольких букв. В таком режим удобно сравнивать сразу много шрифтов и смотреть как выглядят конкретные символы;
Sentence — отображение в виде одного предложения;
Paragraph — выводиться большой кусок текста, который позволит наглядно сравнивать шрифт уже в самом тексте;
Poster — отображаются заголовки, такой способ сравнения удобен для подбора шрифта, который будет использоваться в заголовках.

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

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

Ниже находится панель с выбором «типа отображения», выбираем Latin (latin) и Cyrillic (cyrillic), что даст нам возможность отображать как латинские, так и кириллические буквы:

После этого переходим к третьему пункту на этой странице, а именно к самому подключению. Google предлагает нам три варианта встраивания своих шрифтов — через js, стандартный способ через подключение в и @import в css файле. Я использую последний способ.

Открываем свой файл css и прописываем строчку, которую нам предоставил google:

Всё, шрифт от Google Fonts мы подключили к сайту, теперь как его использовать?

Использование в CSS

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

h1, h2, h3 {font-family: ‘Cuprum’, sans-serif;}

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

На этом всё, спасибо за внимание и до скорых встреч.

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

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

На сайтах html, как правило, встречаются стандартные шрифты. Например

Arial ;
Verdana ;
Times New Roman ;
Georgia ;
Trebuchet MS ;

Некоторым вебмастерам они покажутся через чур простыми и скучными, поэтому многие ищут варианты как можно сделать шрифт на сайте необычным, красивым и т.п. Можно самостоятельно искать шрифты на просторах интернета или гораздо проще воспользоваться самым крупным сервисом по шрифтам Google Fonts: https://fonts.google.com

Что такое Google fonts

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

Для начала рассмотрим небольшую инструкцию как создать шрифт на Google fonts.

Как создать шрифт на Google fonts

Перейдя на страницу https://fonts.google.com Вам предстоит либо выбрать готовый шрифт, либо создать свой. Рассмотрим кратко элементы меню.

В левом блоке можно сразу с помощью фильтра отсеять ненужные шрифты:

Серия шрифтов Serif (с засечками)
Серия шрифтов Sans Serif (без засечек)
Серия шрифтов Display (дисплей)
Серия шрифтов Handwriting (рукописный)
Серия шрифтов Monospace (моноширинные)

Потом так же можно отсеять по следующим критериям:

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

Например, вам понравился следующий шрифт:

Как добавить шрифт Google fonts на сайт

Чтобы подключить шрифт от Google fonts к себе на сайт даже не обязательно использовать правило @font-face . Делается все проще.

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

После выбора шрифта Google Вам сам предложит 2 варианта html-кода для вставки (standart и import). Чаще всего используют первый вариант через link:

... ...

А в CSS надо прописать

body { font-family : newfamily , Ariel ; }

Стоит так же обратить внимание на параметр во вкладке "Customize" - Load Time (Fast). Попробуйте включать и отключать галочки. В зависимости от этого загрузка будет либо быстрая, либо медленная.

Естественно нужно стремится к быстрой загрузке.

Примечание

Несмотря на удобство использования шрифтов от Google fonts, есть недостаток: шрифт нужно подгружать на сайт. Это в свою очередь создает лишнюю зависимость от качества работы сервера fonts.googleapis.com. По моему опыту я знаю, что иногда он тормозит работу сайта. Я полностью отказался от использования сторонних шрифтов.

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

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

К счастью, 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.