логотип PurpleSchool
логотип PurpleSchool

Директива @font-face в CSS. Полное руководство с примерами

Автор

Дмитрий Нечаев

Кастомные шрифты позволяют придать веб-странице уникальный и стильный внешний вид. С помощью правила @font-face в CSS можно подключить любые шрифты, которые будут корректно отображаться на всех устройствах. В этой статье мы подробно рассмотрим, как использовать @font-face для подключения кастомных шрифтов, и приведём примеры его применения.

Основы @font-face

Правило @font-face позволяет определять кастомные шрифты, которые могут быть использованы в CSS-стилях. Оно указывает, где находится шрифт и как он должен использоваться на веб-странице.

Синтаксис @font-face

@font-face {
    font-family: 'CustomFont';
    src: url('path/to/font.woff2') format('woff2'),
         url('path/to/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
  • font-family — задаёт имя шрифта, которое будет использоваться в CSS.
  • src — указывает путь к файлу шрифта и его формат.
  • font-weight — (необязательно) задаёт начертание шрифта (например, normal, bold).
  • font-style — (необязательно) задаёт стиль шрифта (например, normal, italic).

Пример базового использования @font-face

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
         url('fonts/OpenSans-Regular.woff') format('woff');
}

body {
    font-family: 'OpenSans', sans-serif;
}

В этом примере подключается шрифт OpenSans из папки fonts, и он применяется ко всему тексту на странице.

Поддержка различных форматов шрифтов

Для обеспечения кроссбраузерной совместимости рекомендуется указывать несколько форматов шрифтов. Наиболее часто используются следующие форматы:

  • woff2 — наиболее предпочтительный формат для современных браузеров.
  • woff — широко поддерживаемый формат.
  • ttf — старый формат, поддерживается во многих браузерах.
  • eot — используется в старых версиях Internet Explorer.
  • svg — используется в некоторых мобильных браузерах.

Пример подключения нескольких форматов шрифта

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/CustomFont.woff2') format('woff2'),
         url('fonts/CustomFont.woff') format('woff'),
         url('fonts/CustomFont.ttf') format('truetype'),
         url('fonts/CustomFont.eot') format('embedded-opentype'),
         url('fonts/CustomFont.svg#CustomFont') format('svg');
}

Указание различных начертаний и стилей

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

Пример определения различных начертаний и стилей

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
         url('fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Bold.woff2') format('woff2'),
         url('fonts/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Italic.woff2') format('woff2'),
         url('fonts/OpenSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

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

Примеры использования @font-face

Пример 1: Подключение кастомного шрифта и его использование

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.woff2') format('woff2'),
         url('fonts/Roboto-Regular.woff') format('woff');
}

body {
    font-family: 'Roboto', sans-serif;
}

Пример 2: Подключение шрифта с несколькими начертаниями и стилями

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Regular.woff2') format('woff2'),
         url('fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Bold.woff2') format('woff2'),
         url('fonts/Lato-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Italic.woff2') format('woff2'),
         url('fonts/Lato-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

h1 {
    font-family: 'Lato', sans-serif;
    font-weight: bold;
}

p {
    font-family: 'Lato', sans-serif;
    font-style: italic;
}

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

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.woff2') format('woff2'),
         url('fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Bold.woff2') format('woff2'),
         url('fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

p {
    font-family: 'Montserrat', sans-serif;
}

Заключение

Правило @font-face в CSS предоставляет мощные возможности для подключения кастомных шрифтов на веб-страницы. С его помощью можно использовать уникальные шрифты, улучшая визуальное восприятие и стиль сайта. Освоив использование @font-face, вы сможете значительно расширить возможности стилизации и придать вашим веб-проектам профессиональный и уникальный внешний вид.

Стрелочка влевоДиректива @import в CSS. Полное руководство с примерами

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Универсальный селектор в CSS. Полное руководство с примерамиСелектор по тегу в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний