CSS Academy · Урок

Google Fonts и @font-face

Загружайте внешние шрифты из Google Fonts или определяйте собственные шрифты с помощью правила @font-face.

«Google Fonts и @font-face» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Зачем нужны пользовательские шрифты?

Безопасные для веба шрифты предлагают лишь несколько вариантов. Пользовательские шрифты позволяют точно соответствовать фирменному стилю. Два основных подхода — шрифты Google (размещаемый сервис) и @font-face (самостоятельное размещение).

Настройка шрифтов Google

Перейдите на fonts.google.com, выберите семейство шрифтов и нужные начертания, затем скопируйте тег <link> в HTML-элемент <head>:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Использование шрифтов Google в CSS

После подключения укажите название шрифта в стеке font-family:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Параметры API шрифтов Google

Параметр display=swap использует стратегию замены отображения шрифта: сначала текст сразу показывается резервным шрифтом, а после загрузки пользовательского шрифта происходит замена. Это предотвращает невидимость текста во время загрузки.

Основы @font-face

@font-face позволяет загрузить пользовательский файл шрифта, размещённый на вашем сервере. Задайте название семейства шрифтов и источник файла:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: современный формат

WOFF2 (формат открытых веб-шрифтов 2) — рекомендуемый формат. Он обеспечивает лучшее сжатие (обычно на 30% меньше, чем WOFF) и поддерживается всеми современными браузерами. Всегда добавляйте WOFF как резервный вариант.

Несколько начертаний с @font-face

Объявляйте отдельный блок @font-face для каждой комбинации насыщенности и начертания. Используйте одно и то же имя font-family, чтобы браузер автоматически выбирал нужный файл:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

Свойство font-display

Дескриптор font-display управляет поведением загрузки шрифта:

swap — сразу показывать резервный шрифт и заменить его после загрузки (рекомендуется)
block — скрывать текст на срок до 3 секунд
fallback — короткий период скрытия, затем постоянный резервный шрифт
optional — использовать только при наличии шрифта в кэше

<p class="swap-text">Text swaps in once Inter loads.</p>

Переменный шрифт @font-face

Переменные шрифты задают диапазоны осей вместо фиксированных значений насыщенности:

<p class="variable-text">Variable weight text (550)</p>

Предварительная загрузка важных шрифтов

Предварительно загрузите самый важный файл шрифта, чтобы сократить задержку, блокирующую отображение. Добавьте <link rel="preload"> перед таблицей стилей:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() для пропуска загрузки

Используйте local() в src, чтобы перед загрузкой проверить, установлен ли шрифт у пользователя:

<p class="roboto-text">Uses local Roboto if installed</p>

Быстрая проверка

Какой формат шрифта обеспечивает лучшее сжатие и наиболее широкую поддержку современными браузерами?

Итоги

Шрифты Google легко подключаются через тег <link>. Размещайте шрифты самостоятельно с помощью @font-face, используя формат WOFF2 и font-display: swap для наилучшей производительности. Предварительно загружайте важные шрифты и используйте local(), чтобы избежать ненужных загрузок.

Часто задаваемые вопросы

Урок «Google Fonts и @font-face» бесплатный?

Да — полный текст урока «Google Fonts и @font-face» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Google Fonts и @font-face»?

Загружайте внешние шрифты из Google Fonts или определяйте собственные шрифты с помощью правила @font-face. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Google Fonts и @font-face»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy