Developer Tools
Text ToolsИнструмент предварительного просмотра шрифтов
Просматривайте любой шрифт Google с пользовательским текстом, размером, начертанием и цветом. Мгновенно генерируйте CSS-код. Бесплатный онлайн-инструмент.
Популярные шрифты
Style
Browser Support
Style Tags
216 fonts
Живой предпросмотр
The quick brown fox jumps over the lazy dog
Предпросмотр шрифта
Название шрифта:Roboto
Размер шрифта:32px
Насыщенность шрифта:400
CSS-код
CSS font-family:
font-family: 'Roboto', sans-serif;URL импорта Google Fonts:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');Full CSS snippet
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 32px;
color: #1e293b;
}Похожие инструменты
О инструменте предпросмотра шрифтов
Как это работает
- Введите любое имя семейства Google Fonts или выберите из популярного списка
- Шрифт загружается динамически через API Google Fonts в вашем браузере
- Настройте начертание, размер, цвет и фон для идеальной конфигурации
- Скопируйте объявление CSS font-family или URL импорта для проекта
- Переключайтесь между пресетами текста или вводите собственный
Распространённые сценарии использования
- Выбор правильной гарнитуры для нового веб-проекта
- Сравнение различных начертаний одного шрифта при разных размерах
- Генерация правильного CSS-фрагмента для Google Font
- Быстрая демонстрация вариантов шрифта клиентам
- Проверка отображения цифр и символов для дашбордов
Часто задаваемые вопросы
Что такое инструмент предпросмотра шрифтов?
Инструмент предпросмотра шрифтов позволяет загрузить любое семейство Google Fonts, настроить его начертание, размер, цвет и фон, просмотреть с пользовательским текстом и скопировать CSS-код импорта — всё прямо в браузере.
Как просмотреть Google Font?
Введите название шрифта Google (например, 'Playfair Display') в поле поиска и нажмите «Загрузить шрифт», или выберите название из списка популярных шрифтов.
Можно ли использовать любой шрифт Google?
Да. Вы можете ввести точное название любого шрифта, доступного в Google Fonts. Инструмент автоматически формирует правильный URL и загружает все доступные начертания (100–900).
Какие начертания шрифтов поддерживаются?
Инструмент запрашивает начертания от 100 до 900 из Google Fonts. Если шрифт не включает конкретное начертание, браузер отобразит ближайшее доступное.
Как скопировать CSS-код для проекта?
После загрузки шрифта перейдите в раздел CSS-кода на правой панели. Используйте кнопки копирования рядом с каждым фрагментом для копирования объявления font-family, URL @import или полного блока CSS.
Какие примеры текстов доступны?
Предусмотрено шесть пресетов: Панграмма, Алфавит, Цифры и символы, Lorem Ipsum, пример заголовка и пример абзаца. Вы также можете ввести собственный текст.
Хранит ли инструмент данные?
Нет. Инструмент полностью работает в браузере. Шрифты загружаются через публичный API Google Fonts, ничего не сохраняется на серверах.
Можно ли изменить цвет текста и фона?
Да. Используйте цветовые палитры в разделе «Цвета» для выбора любого HEX-цвета текста и фона предпросмотра. Это помогает проверить контрастность.
Почему шрифт не загружается?
Загрузка может завершиться ошибкой, если имя шрифта написано неправильно, шрифт удалён из Google Fonts или сеть блокирует запросы к fonts.googleapis.com.
Инструмент бесплатный?
Да, инструмент предпросмотра шрифтов полностью бесплатен. Шрифты раздаются CDN Google Fonts под лицензиями с открытым исходным кодом.
Можно ли сравнить несколько шрифтов?
Вы можете быстро переключаться между шрифтами, нажимая на чипы популярных шрифтов. Для формального сравнения откройте инструмент в двух вкладках браузера.
Что такое CSS-объявление font-family?
CSS-объявление font-family указывает браузеру, какую гарнитуру использовать, с резервными вариантами. Пример: font-family: 'Roboto', sans-serif;