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

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

В данной статье найдете подборку из 10-ти бесплатных шрифтов Google Fonts, которые идеально подойдут для оформления заголовков сайта. Они установлены во многих веб-проектах по всему миру. Материал является переводом этой заметки от Jake Rocheleau.

Если вы не ориентируетесь как именно подключать данную функциональность, можете глянуть пост о — там есть парочка примеров.

1. Montserrat

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

7. PT Sans

Если используете Вордпресс CMS в своем веб-проекте, то советуем почитать заметку про подключение шрифтов в WordPress , где также рассмотрен и метод с Google Fonts.

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

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

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

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

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

В числе преимуществ:

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

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

Чтобы воспользоваться Google Fonts API, перейдите по данной ссылке .

Кликните по кнопке Cyrillic (как показано на рисунке ниже)

Из списка представленных шрифтов выберите нужный шрифт. Затем кликните по закладке “Use this font”. Замечу, что закладка “Download” вам не нужна, только если вы хотите использовать этот шрифт на своем компьютере, например, для фотошопа (правда гугл просит, но не требует, при этом сделать взнос для будущего развития хранилища).
Если вы собираетесь использовать этот шрифт курсивом или жирным, то поставьте галочки возле соответствующих названий.

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

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

h1 { font-family: "PT Serif", arial, serif; }

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

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

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

Что общего между свойством CSS @font-face и Google Web Fonts ?
@font-face позволяет использовать свои шрифты (не веб-безопасные шрифты) при отображении сайта, Google дает нам инструмент для быстрого внедрения. Этот самый Google создал онлайн хранилище шрифтов , чтобы мы с вами могли их использовать в своих работах. Самое главное — все шрифты абсолютно бесплатны и на 100% легальны. Profit

Итак, как это все работает?

Выбираем тип шрифта, который нам нужен (кириллица и латинница думаю будут актуальны у нас. Или есть люди из Камбоджи и Греции?)

Опишу работу со шрифтами, содержащими кириллицу, все же родной язык. Кириллических шрифтов в хранилище Google всего 8, очень мало. Но я надеюсь, что работы в этом направлении ведутся. Порадовала Canonical (компания, выпускающая Ubuntu), предоставив в свободный доступ фирменный шрифт из ОС Ubuntu 10.10 . Open Sourсe это хорошо.

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

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

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

Ниже код, который нам и нужен для сайта. Использовать его можно с некоторыми оговорками. По умолчанию, Google подключает все доступные начертания, иногда это лишнее. Код CSS тоже можно почистить, удалив те селекторы, которые не настраивали в окне параметров.

Как видим селектор который отвечает за шрифт в css, называется font. Чтоб поменять в css размер шрифта, надо прописать font-size:15px и менять количество пикселов до нужного значение. В css жирный шрифт указывается вот таким селектором: font-weight: bold и так далее.

Нужные начертания и пример использования шрифта для элементов страницы можно выбрать и увидеть на закладке “Use this font”

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

И последнее. Любой шрифт для css из онлайн хранилища можно скачать к себе на компьютер для использования в системе. И это тоже совершенно бесплатно , попросят только donate(пожертвование), которое может быть и 0$. Тут уже все на вашей совести, каждый для себя решает — платить или нет.

Надеюсь, информация была полезной и вы узнали что-то новое