Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face

Существует несколько способов использовать не системные шрифты на сайте. Остановимся на двух самых простых и наименее дорогих вариантах: Google Web Fonts и @font-face rule, хотя платные сервисы Typekit,Fonts.com webfontsFontdeckWebtypeWebINK тоже предлагают высококачественные шрифты заслуживающие внимания.

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

Веб сервисы вложения шрифтов

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;
      }

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

Шрифты рекоммендованные Google Web Fonts

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

  • Open Sans
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Josefin Slab
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Arvo
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Lato
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Vollkorn
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Abril Fatface
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Ubuntu
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • PT Sans + PT Serif
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Old Standard TT
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Droid Sans
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face

Интеграция шрифтов от @font-face

В этом случае шрифты устанавливаются на сервере пользователя и не зависят от внешних сервисов. @font-face поддерживается почти всеми современными браузерами.
Шрифт редактируется пользователем с использованием @font-face и интегрируется в форматах поддерживаемых большинством браузеров: TTF, WOFF, EOT и SVG file.
@font-face хранит множество шрифтов, но мы будем использовать шрифты доступные на FONTSQUIRREL, которые бесплатны и уже упакованы @font-face в наборы с нужным форматом, CSS и HTML кода. Fontsquirrel так же предоставляет фантастический инструмент “@Font-Face Generator”, который может конвертировать шрифт с ПК в формат совместимый с веб.

Реализация
1. Выбираем понравившийся шрифт в Fontsquirrel.
2. Качаем набор @font-face и тестируем пример кода в stylesheet.css и demo.html файлах. Все форматы шрифтов должны быть закачаны на сервер.

     @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;
}

 

Шрифты рекоммендованные FontSquirrel

  • Anivers
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Junction
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Fertigo
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Aller
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Audimat
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Delicious
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Prociono
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Fontin
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Fontin-Sans
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face
  • Chunkfive
    Лучшая двадцатка шрифтов для веб от Google Web Fonts и @font-face