Свойство @font-face
  1. Главная
  2. CSS
  3. Свойство @font-face
Создание сайта на CMS WordPress: обучение и хостинг
← Перейти к списку свойств

СВОЙСТВО @FONT-FACE

Свойство @font-face позволяет загружать шрифт с удаленного сервера или локально установленный шрифт и интегрировать его в страницу.

Поддержка браузеров

Синтаксис

@font-face {
    ...
}

Значения свойства

Значение Описание
font-family Определяет название шрифта.
src Определяет путь к шрифту.
font-stretch Позволяет уплотнять или расширять начертание шрифта. Возможные значения:
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
font-style Определяет стиль шрифта. Возможные значения:
  • normal
  • italic
  • oblique
font-weight Позволяет настраивать насыщенносмть шрифта. Возможные значения:
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
unicode-range Определяет диапазон символов Unicode, которые поддерживает шрифт. Значением по умолчанию является «U + 0-10FFFF»

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet pulvinar felis, ac condimentum nisi egestas ut. Cras tincidunt aliquam placerat. Duis ac lectus lacinia, sollicitudin velit sed, tincidunt velit. Curabitur nec arcu tincidunt, porta est quis, tincidunt quam. Phasellus dapibus est in urna viverra, a auctor leo eleifend. Fusce ac consectetur odio. In id nibh nec nibh consectetur semper.
</p>
HTML 
@font-face {
    font-family: montserrat;
    src: url(fonts/montserrat.woff);
}
   
p {
    font-family: montserrat;
}
CSS
← Перейти к списку свойств