font-family

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

Часто удобно использовать сокращённое свойство font для одновременной настройки font-size и других свойств, связанных со шрифтом.

В списке font-family всегда следует включать хотя бы одно общее имя семейства шрифтов, так как нет гарантии, что какой-либо определённый шрифт доступен. Это позволяет браузеру выбирать подходящий резервный шрифт при необходимости.

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

/* A font family name and a generic family name */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

/* Global values */
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: revert-layer;
font-family: unset;

Свойство font-family перечисляет одно или несколько семейств шрифтов, разделённых запятыми. Каждое семейство шрифтов задаётся как <family-name> или <generic-name> значение.

В примере ниже перечислены два семейства шрифтов, первое с <family-name> , а второе с <generic-name>:

font-family: "Gill Sans Extrabold", sans-serif;

<family-name>

Имя семейства шрифтов. Оно должно быть либо одним <string> значением, либо последовательностью значений <custom-ident>, разделённых пробелами. Строковые значения должны быть заключены в кавычки, но могут содержать любые символы Юникода. Пользовательские идентификаторы не заключаются в кавычки, но некоторые символы необходимо экранировать.

Рекомендуется заключать в кавычки имена семейств шрифтов, содержащие пробелы, цифры или знаки препинания, кроме дефисов.

См. также Допустимые имена семейств.

<generic-name>

Общие семейства шрифтов — это механизм резервного копирования, способ сохранить часть намерений автора таблицы стилей, когда ни один из указанных шрифтов недоступен. Общие имена семейств шрифтов — это ключевые слова и не должны заключаться в кавычки. Общее семейство шрифтов должно быть последним элементом в списке имён семейств шрифтов. Определены следующие ключевые слова:

serif

Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы или имеют фактические засечки.

Например: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.

sans-serif

Глифы имеют простые концы штрихов.

Например: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.

monospace

Все глифы имеют одинаковую фиксированную ширину.

Например: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace.

cursive

Глифы в шрифтах курсивом, как правило, имеют соединительные штрихи или другие характеристики курсива, выходящие за рамки наклонных шрифтов. Глифы частично или полностью соединены, и результат выглядит скорее как рукописный текст, чем печатные буквы.

Например: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive.

fantasy

Шрифты Fantasy в основном являются декоративными шрифтами, которые содержат игривые изображения символов.

Например: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

system-ui

Глифы взяты из шрифта по умолчанию пользовательского интерфейса на данной платформе. Поскольку типографские традиции сильно различаются по всему миру, этот общий шрифт предоставлен для шрифтов, которые не накладываются чётко на другие общие шрифты.

ui-serif

Шрифт по умолчанию с засечками для пользовательского интерфейса.

ui-sans-serif

Шрифт по умолчанию без засечек для пользовательского интерфейса.

ui-monospace

Шрифт по умолчанию с фиксированной шириной для пользовательского интерфейса.

ui-rounded

Шрифт по умолчанию пользовательского интерфейса с закруглёнными элементами.

math

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

emoji

Шрифты, специально разработанные для рендеринга смайликов.

fangsong

Особый стиль китайских иероглифов, расположенный между шрифтом с засечками Song и курсивным стилем Kai. Этот стиль часто используется для правительственных документов.

font-family = 
  [ <family-name> | <generic-family> ]#  

<family-name> = 
  <string>         |
  <custom-ident>+  

<generic-family> = 
  <generic-script-specific>  |
  <generic-complete>         |
  <generic-incomplete>       

<generic-script-specific> = 
  generic( kai )       |
  generic( fangsong )  |
  generic( nastaliq )  

<generic-complete> = 
  serif       |
  sans-serif  |
  system-ui   |
  cursive     |
  fantasy     |
  math        |
  monospace   

<generic-incomplete> = 
  ui-serif       |
  ui-sans-serif  |
  ui-monospace   |
  ui-rounded     

Следующие объявления допустимы:

font-family: "Goudy Bookletter 1911", sans-serif;

Следующие объявления недопустимы:

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

Следующий пример технически допустим, но не рекомендуется:

font-family:
  Gill Sans Extrabold,
  sans-serif;

• font-style
• font-weight
• Основные принципы стилизации текста и шрифтов