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

Вот мой топ-5 шрифтов:

  1. Open Sans — самый популярный бесплатный шрифт, подключается с google fonts.
  2. Lato — еще один отличный бесплатный шрифт, используется в slack..
  3. Proxima Nova — платный, но достойный шрифт, в котором хорошо проработаны все языки, в том числе и тайский.
  4. Circular — этот шрифт приобрел популярность после того, как стал использоваться в Airbnb и Spotify.
  5. Futura — очень старый и популярный геометрический шрифт без засечек. Подключить можно с typekit.

По поводу подключения шрифтов можно почитать статью на хабре — Использование веб-шрифтов, самый лучший способ (на 2015 год).

Если вкратце:

  • Используйте Font Face Observer.
  • Подбирайте наиболее подходящий переходный шрифт.
  • Используйте <link rel="preload" href="FiraSans-Regular.woff"> для предзагрузки woff шрифтов.
  • Кешируйте шрифты в localStorage для повторно зашедших пользователей.

Сейчас также набирает популярность использование системных шрифтов. При их применении на Android будет использоваться Roboto, на Mac и iOS — San Francisco, Segoe UI — на Windows и фиг знает что — на Linux. Это позволяет добиться наилучшего отображения текста и нулевой задержки загрузки шрифта. О способах использования системных шрифтов есть статья на medium — How To Use System Typefaces In Web Projects. Также по этому поводу Marcin Wichary(Design lead & typographer at Medium) написал интересную статью с громким названием System shock.

P.S. Под конец рекомендую почитать статью Юрия Матюхина по управлению поведением font-face в CSS