Инструмент подбора пар шрифтов Google Fonts

Подбирайте идеальные сочетания шрифтов для заголовков и основного текста с мгновенным предпросмотром

Как использовать этот инструмент:

  1. Выберите шрифт для заголовка и для основного текста в выпадающих списках
  2. Настройте размеры шрифтов (по желанию)
  3. Введите свой текст для предпросмотра или используйте пример
  4. Нажмите "Применить шрифты", чтобы увидеть результат
  5. Скопируйте код для использования на своем сайте
  6. Попробуйте готовые примеры сочетаний шрифтов

Предпросмотр сочетания шрифтов

Заголовок статьи

Это пример основного текста, который позволяет оценить, как сочетаются выбранные шрифты для заголовков и основного контента. Хорошая типографика улучшает читаемость и создает приятное впечатление от сайта.

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

Код для вашего сайта

Скопируйте этот код и вставьте в свой HTML и CSS файлы:

<!-- Добавьте в раздел head вашего HTML -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

<!-- CSS стили -->
<style>
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
  }
  
  body, p, div, span {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
  }
</style>

Примеры удачных сочетаний шрифтов

Нажмите на любой пример, чтобы применить это сочетание