ENGLISH

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
192 Collect

20 Лучших веб-шрифтов от Google Web

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

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

Самые рекомендуемые Google веб-шрифты

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

  • Alegreya Alegreya Google Fonts Web Fonts
  • B612 B612 Google Fonts Web Fonts
  • Muli Muli Google Fonts Web Fonts
  • Titillium Web Titillium Web Google Fonts Web Fonts
  • Varela Varela Google Fonts Web Fonts
  • Vollkorn Vollkorn Google Fonts Web Fonts
  • IBM Plex IBM Plex Google Fonts Web Fonts
  • Crimson Text Crimson Text Google Fonts Web Fonts
  • Cairo Cairo Google Fonts Web Fonts
  • BioRhyme BioRhyme Google Fonts Web Fonts
  • Karla Karla Google Fonts Web Fonts
  • Lora Lora Google Fonts Web Fonts
  • Frank Ruhl Libre Frank Ruhl Libre Google Fonts Web Fonts
  • Playfair Display Playfair Display Google Fonts Web Fonts
  • Archivo Archivo Google Fonts Web Fonts
  • Spectral Spectral Google Fonts Web Fonts
  • Fjalla One Fjalla One Google Fonts Web Fonts
  • Roboto Roboto Google Fonts Web Fonts
  • Montserrat Montserrat Google Fonts Web Fonts
  • Rubik Rubik Google Fonts Web Fonts
  • Source Sans Source Sans Google Fonts Web Fonts
  • Cardo Cardo Google Fonts Web Fonts
  • Cormorant Cormorant Google Fonts Web Fonts
  • Work Sans Work Sans Google Fonts Web Fonts
  • Rakkas Rakkas Google Fonts Web Fonts
  • Concert One Concert One Google Fonts Web Fonts
  • Yatra One Yatra One Google Fonts Web Fonts
  • Arvo Arvo Google Fonts Web Fonts
  • Lato Lato Google Fonts Web Fonts
  • Abril FatFace Abril Fatface Google Fonts Web Fonts
  • Ubuntu Ubuntu Google Fonts Web Fonts
  • PT Serif PT Serif Google Fonts Web Fonts
  • Old Standard TT Old Standard TT Google Fonts Web Fonts
  • Oswald Oswald Google Fonts Web Fonts

Fonts Optimized for UI

  • PT Sans PT Sans Google Fonts Mobile Fonts UI
  • Poppins Poppins Google Fonts Mobile Fonts UI
  • Fira Sans Fira Sans Google Fonts Mobile Fonts UI
  • Nunito Nunito Google Fonts Mobile Fonts UI
  • Oxygen Oxygen Google Fonts Mobile Fonts UI

Fonts Optimized for Legibility and Readability

  • Exo 2 Exo 2 Google Fonts Mobile Fonts UI
  • Open Sans Open Sans Google Fonts Mobile Fonts UI
  • Merriweather Merriweather Google Fonts Mobile Fonts UI
  • Noto Sans Noto Sans Google Fonts Mobile Fonts UI
  • Source Sans Pro Source Sans Pro Google Fonts Mobile Fonts UI

Как использовать веб-шрифты

На данный момент большинство дизайнеров знают, как пользоваться веб-шрифтами, но, если вы не уверены, вот два основных способа. Первый —использовать библиотеки веб-шрифтов, такие как Google Fonts, Webtype, Fonts.com или Typekit и загружать шрифт с их серверов, как вы увидите в этом примере: 1. Сервисы встраивания веб-шрифтов

Второй — разместить шрифт на своем сервере и использовать правило @font-face в таблице стилей, как показано здесь: 2. Встраивание шрифтов с использованием правила @font-face

Сервисы встраивания веб-шрифтов

 

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

Реализация

Это действительно быстро и просто:

1. Выберите шрифт. Вы можете добавить его в свою коллекцию или использовать “quick-use” для генерации кода и опций для этого шрифта.

2. Скопируйте и вставьте сгенерированный код в <Head>

   <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>

3. Шрифт теперь доступен в вашем коде CSS

   body { font-family: 'Tangerine', serif; font-size: 48px; }

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

 

Встраивание шрифтов с использованием правила @font-face

Шрифты размещаются на сервере пользователя независимо от внешних сервисов. @font-face — это устаревшее правило CSS2, которое было повторно введено в спецификации CSS3 и поддерживается почти всеми современными браузерами. Веб-шрифт — это настраиваемый шрифт, который поддерживается различными браузерами и доступен в таких форматах, как TTF, WOFF, EOT и SVG.

   @font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }
Этот материал переведен на русский язык редакцией Deadsign, официального партнёра Awwwards в России.