Лучшие Гугл шрифты для сайта - uGuide.ru

Лучшие Гугл шрифты для сайта

  • Обновлено:
    28.10.2019
  • Просмотры:
    739
  • Отзывы:
    0
  • Рейтинг: 4.9
Шрифты играют огромную роль на качество подачи и удобство восприятия информации. Веб-мастера учитывают их нюансы, поскольку выбор шрифтов оказывает влияние на посетителей сайта.

Google Fonts – лучший бесплатный каталог шрифтов в котором собрано около 1000 семейств на более чем 135 языках. Мы сделали подборку из 10 самых интересных вариантов, подходящих для установки на сайт и ПК.

Шрифты делятся на семейства, но основополагающим отличием принято считать наличие или отсутствие засечек – штрихов на концах букв. Это отражено в названии шрифтов: «serif» означает засечку, если рядом есть частица «sans» (от фр. sans – «без»), то шрифт будет без засечек. Они могут быть различной формы и размера: прямые, закруглённые, перпендикулярные, толстые, тонкие и ещё какие-нибудь. Считается, что засечки служат для улучшения читабельности текста, поскольку визуально образуют горизонтальную линию направления букв.

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

 

Лучшие шрифты от Google Fonts – ТОП 10:

  1. Roboto – самый популярный шрифт в Интернете!
  2. Open Sans – номер 2 по популярности, отлично воспринимается.
  3. Montserrat – хорошо читаемый шрифт без засечек.
  4. Roboto Condensed – отличный вариант для текстовых абзацев.
  5. Source Sans Pro – хорош для оформления интерфейсов веб-приложений.
  6. Oswald – солидный шрифт для заголовков.
  7. Merriweather – изящный шрифт с засечками.
  8. Noto Sans – гладкий и простой шрифт для цифровых экранов.
  9. Yanone Kaffeesatz – стильный шрифт для кричащих заголовков.
  10. Caveat – красивый прописной шрифт для особых случаев.

 

1. Roboto – самый популярный шрифт в Интернете!

Самый популярный шрифт Roboto

Скачать шрифт Roboto

  • Дата создания: 2011 год
  • Всего стилей: 12 шт.
  • Используют: 26 млн. сайтов

Roboto – семейство бесплатных шрифтов с большим количеством вариантов веса: Thin, Light, Regular, Medium, Bold, Black. Шрифт придуман дизайнером Кристианом Робертсоном и впервые был представлен вместе с ОС Android 4.0 «Ice Cream Sandwich» в качестве системного шрифта. Сегодня это самый популярный шрифт в Интернете.

 

2. Open Sans – второй по популярности, отлично воспринимается на сайтах

Бесплатный шрифт Open Sans

Скачать Open Sans

  • Дата создания: 2010 год
  • Всего стилей: 10 шт.
  • Используют: 23 млн. сайтов

Open Sans – выглядит приятно, легко читается на экранах. Засечек не имеет, разработан Стивом Матессоном – одним из ведущих современных специалистов в типографике. Находится на 2-м месте по популярности в Сети, Google его использует для своей рекламы и некоторых сайтов.

 

3. Montserrat – хорошо читаемый шрифт без засечек

Шрифт Montserrat

Скачать шрифт Montserrat

  • Дата создания: 1989 год
  • Всего стилей: 18 шт.
  • Используют: 7,5 млн. сайтов

Montserrat – шрифт без засечек, выглядит просто, интересно, отлично читается. Был изобретён в 1989 году Джульеттой Улановски, дизайнером из Буэнос Айреса, и назван в честь её родного района города. Стили различной степени жирности добавляются периодически по сей день.

 

4. Roboto Condensed – отличный вариант для текстовых абзацев

Roboto Condensed

Скачать Roboto Condensed

  • Дата создания: 2011 год
  • Всего стилей: 6 шт.
  • Используют: 2,9 млн. сайтов

Roboto Condensed – ещё одно творение Кристиана Робертсона, которое он вывел в отдельное семейство. Это узкий, вытянутый шрифт, довольно внятный и приятный на вид. Хорошо подходит для длительного чтения с экрана.

 

5. Source Sans Pro – хорош для оформления интерфейсов веб-приложений

Шрифт Source Sans Pro

Скачать Source Sans Pro

  • Дата создания: 2012 год
  • Всего стилей: 6 шт.
  • Используют: 5,4 млн. сайтов

Source Sans Pro – содержит полный набор стилей, первый шрифт Adobe с открытым доступом. Разработан Полом Хантом, хорошо подходит для пользовательских интерфейсов. Поддерживает кириллицу во всех стилях, кроме курсива.

 

6. Oswald – солидный шрифт для заголовков

Oswald

Скачать шрифт Oswald

  • Дата создания: 2011 год
  • Всего стилей: 6 шт.
  • Используют: 5,4 млн. сайтов

Oswald – относительно новый шрифт, бы создан художником Верноном Адамсом в 2011 году, позже были добавлены стили, которых всего шесть. Шрифт вытянутый, стильный, внушительно смотрится в заголовках. Широко используется на сайтах и в приложениях для ПК и мобильных платформ.

 

7. Merriweather – изящный шрифт с засечками

Merriweather

Скачать Merriweather

  • Дата создания: 2010 год
  • Всего стилей: 8 шт.
  • Используют: 4,1 млн. сайтов

Merriweather – шрифт с чётко выраженными засечками, вытянутый и слегка сжатый, с открытой, плавной формой букв. Был разработан специально для отображения на электронных экранах. Изящно выглядит и хорошо читается. Существует также в версии без засечек с приставкой «sans».

 

8. Noto Sans – гладкий и простой шрифт для цифровых экранов

Шрифт от Google: Noto Sans

Скачать Noto Sans

  • Дата создания: 2012 год
  • Всего стилей: 4 шт.
  • Используют: 3,1 млн. сайтов

Noto Sans – шрифт с упрощённым дизайном букв: простые линии, никаких засечек, буквы чуть шире среднего и их толщина тоже. Был специально разработан для компьютеров с учётом особенностей оцифровки. Выглядит просто, гладко, хорошо читаем. Подходит для текста абзацев.

 

9. Yanone Kaffeesatz – стильный шрифт для кричащих заголовков

Yanone Kaffeesatz

Скачать Yanone Kaffeesatz

  • Дата создания: 2004 год
  • Всего стилей: 4 шт.
  • Используют: 460 тыс. сайтов

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

 

10. Caveat – красивый прописной шрифт для особых случаев

Caveat

Скачать шрифт Caveat

  • Дата создания: 2014 год
  • Всего стилей: 2 шт.
  • Используют: 110 тыс. сайтов

Caveat – это элегантный прописной шрифт, его профиль легко узнаваем и отлично читается. Шрифт игривый и лёгкий, подходит для утончённых заголовков, каких-то сносок, а также писем личного характера. Красивый и непринуждённый, лишён официоза, но на роль основного для сайта, конечно, не подходит.

 

Как скачать шрифт с Google Fonts?

Загрузка шрифтов с Google Fonts

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

 

Как установить шрифт на свой компьютер?

Установка шрифта на компьютер

После загрузки zip-архива на ПК и открытия папки со шрифтом его нужно установить в операционную систему Windows 10 или MacOS дважды кликнув мышкой по нему. Откроется окно с предпросмотром шрифта в котором нужно вверху нажать "Установить". После чего можно использовать его в текстовых, графических редакторах, типа Photoshop и не только.

 

Как изменить шрифт в браузере?

Любые установленные шрифты можно использовать в своем браузере (Гугл Хром, Яндекс Браузер, Mozilla Firefox, Опера и др). Покажем способ, как можно изменить шрифты в Google Chrome, который считается самым популярным браузером среди пользователей Интернета.

Открываем: "Настройки и управление Google Chrome ()" → "Настройки" → "Внешний вид" → "Настроить шрифты":

На открывшейся вкладке нужно выбрать необходимые шрифты:

 

Как самому подключить шрифт к сайту на CMS?

CMS – это система управления содержимым сайта, так называемый "движок" (специальный скрипт, дистрибутив), который устанавливается на хостинг. Движки позволяют собирать полноценные сайты, блоги, интернет-магазины: добавлять/удалять страницы, менять дизайн шаблона, подключать плагины и т.д.

Для ручной установки шрифта на сайт, работающего на одной из CMS (таких как: WordPress, Joomla, Drupal и др.), нужно скопировать и добавить код встраивания шрифта в исходный код шаблона в область <head>...</head>. При этом, в файле CSS указать правило для определения подключенных семейств. Образцы кода для обоих случаев сервис предоставляет на вкладке «Families Selected» – достаточно скопировать и вставить.

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

Пример подключения шрифтов:

<html>
  <head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Oswald|Roboto&display=swap" rel="stylesheet">
  <style>
  body {
  font-family: 'Roboto', sans-serif;
  font-family: 'Open Sans', sans-serif;
  font-family: 'Montserrat', sans-serif;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  }
  </style>
  </head>
  <body>
  <div>Подключение шрифтов на сайт!</div>
  </body>
</html>

 

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

Конструктор сайтов – это самый простой и быстрый способ, чтобы самостоятельно создать сайт-визитку, лендинг (одностраничник) или интернет-магазин без знаний кодинга и без помощи программистов. В отличии от CMS конструкторы намного проще и функциональнее из коробки – идут в комплекте с хостингом, набором шаблонов, виджетами и другими необходимыми SEO и маркетинговыми инструментами.

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

Работа с веб-шрифтами на uKit

Выбор шрифта на uKit

Попробовать конструктор uKit

uKit – самый популярный конструктор с визуальным редактором, позволяющий за несколько минут создать профессиональный сайт: для бизнеса, оказания услуг, продажи товаров и других целей. Для изменения шрифта на uKit-сайте достаточно зайти в режим редактирования, перейти на вкладку "Дизайн" и открыть вкладку "Шрифты", где выбрать уже готовую шрифтовую пару (для заголовков и текста) или создать собственную пару из каталога шрифтов.

 

Работа с веб-шрифтами на Wix

Смена шрифта на Wix

Попробовать конструктор Wix

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

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

 

Выводы и рекомендации

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

Разборчивость текста и привлекательность шрифтов ощутимо влияют на поведение посетителей сайта. Мы включили в рейтинг 10 популярных шрифтов, любой из которых можно использовать бесплатно на своём сайте, работающем на любом движке или сайтбилдере. Загрузить на ПК шрифт из Google Fonts можно очень просто и всего за пару минут. После установки на Windows или MacOS шрифт будет доступен во всех приложениях, поддерживающих их выбор – Word, Photoshop, браузерах и т. д.

  • Автор:

no avatar