toolsmoah

Просмотрщик Google Fonts

Ищите и просматривайте шрифты Google. Найдите идеальный шрифт для своих веб-проектов и посмотрите, как они выглядят в реальном времени.

Поиск шрифтов
Ищите или фильтруйте нужные вам шрифты.
Roboto
sans-serif•18 стили
Open Sans
sans-serif•12 стили
Noto Sans JP
sans-serif•9 стили
Montserrat
sans-serif•18 стили
Inter
sans-serif•18 стили
Poppins
sans-serif•18 стили
Lato
sans-serif•10 стили
Material Icons
monospace•1 стили
Roboto Condensed
sans-serif•18 стили
Roboto Mono
monospace•14 стили
Roboto
Sans-serif • 18 стили
Привет! Просмотрщик Google Fonts. Быстрая коричневая лиса перепрыгивает через ленивую собаку. 1234567890
Получить код
Скопируйте код, чтобы применить шрифты к своим веб-проектам.

Вставьте приведенный выше код в тег head вашего HTML-файла.

📚 Полное руководство по Google Fonts

Узнайте, как эффективно использовать Google Fonts

🎨🎨 Что такое Google Fonts?

Google Fonts — это бесплатный сервис веб-шрифтов, предоставляемый Google.

  • 1400+ семейств шрифтов с открытым исходным кодом
  • Бесплатная лицензия для коммерческого использования
  • Глобальное распространение через быстрый CDN
  • Поддержка различных языков и систем письма
  • Оптимизировано для адаптивного веб-дизайна

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

1. Использование в 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=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

2. Применение в CSS

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 Советы по оптимизации производительности

  • Используйте font-display: swap, чтобы предотвратить FOIT
  • Используйте preconnect, чтобы сократить время поиска DNS
  • Выборочно загружайте только необходимые начертания шрифтов
  • Ограничьте наборы символов с помощью параметра subset
  • Настройте локальные резервные шрифты

Пример оптимизированной загрузки:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 Адаптивная типографика

Настройки для оптимальной читаемости на различных устройствах:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}
  • 모바일: 16px 이상 권장
  • 태블릿: 18px 이상 권장
  • 데스크톱: 20px 이상 권장

🎯🎯 Руководство по выбору шрифта

Рекомендуемые шрифты по использованию:

  • Основной текст: Noto Sans KR, Spoqa Han Sans
  • Заголовки: Noto Serif KR, Gowun Dodum
  • Код: Fira Code, JetBrains Mono
  • Декоративный: Jua, Gamja Flower

Критерии выбора:

  • Соответствие фирменному стилю
  • Читабельность и доступность
  • Диапазон поддержки нескольких языков
  • Производительность загрузки

🔧🔧 Расширенное использование

Использование вариативных шрифтов:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

Использование пользовательских свойств CSS:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ Соображения доступности

  • Достаточный коэффициент контрастности: WCAG 4.5:1 или выше
  • Правильный межстрочный интервал: рекомендуется 1,4–1,6
  • Читаемый размер шрифта: минимум 16 пикселей
  • Удобство для дислексиков: рассмотрите OpenDyslexic и т. д.

Пример доступного CSS:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 Отладка и тестирование

Проверка загрузки шрифта:

  • Проверьте файлы шрифтов на вкладке «Сеть» в DevTools
  • Проверьте фактически примененные шрифты в вычисленных стилях
  • Проверьте поведение font-display

Инструменты измерения производительности:

  • Google PageSpeed Insights
  • WebPageTest
  • Проверки оптимизации шрифтов Lighthouse

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;

💡💡 Практические советы

Настройка проекта:

  • Определите правила шрифтов в системе дизайна
  • Установите стратегию загрузки шрифтов
  • Настройте стек резервных шрифтов
  • Настройте мониторинг производительности

Обслуживание:

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