font-family

С помощью font-family можно задать семейство шрифта, которым будет написан текст. Можно прописать конкретный шрифт, например "Arial". А можно задать желаемый тип шрифта: например, с засечками serif или без засечек sans-serif.

Допустим, мы хотим, чтобы текст был набран шрифтом PT Sans. Если такой шрифт не установлен у пользователя, то пускай откроется в Arial. Если и такого нет, то пусть будет стандартный шрифт без засечек:

        
          
          body {  font-family: "PT Sans", "Arial", sans-serif;}
          body {
  font-family: "PT Sans", "Arial", sans-serif;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

«PT Sans», «Arial», «Times New Roman» — это примеры семейств шрифтов. С помощью font-family можно задать любой шрифт для любого текстового элемента на странице.

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

Обычно в font-family задают сразу несколько шрифтов, перечисляя их через запятую. На первом месте ставят самый редкий шрифт из тех, что хотят использовать для этого элемента. Затем — похожий, но более распространённый шрифт. В самом конце — желаемый тип шрифта. Браузер проходит по списку слева направо и использует первый найденный на компьютере шрифт.

• Имя шрифта — шрифт, который будет использоваться на странице. Например, Times или Helvetica.
• Семейство шрифтов — прописывается последним на случай, если ни одного из шрифтов нет на компьютере пользователя:
  • serif — шрифт с засечками, например, «Times».
  • sans-serif — шрифт без засечек, например, «Arial».
  • monospace — моноширинные шрифты с одинаковой шириной каждого символа. Похожи на текст, набранный на печатной машинке. Например, шрифт «Courier».
  • cursive — курсивный шрифт или italic.
  • fantasy — декоративный шрифт.
  • system-ui — использует стандартный шрифт на устройстве пользователя.

Зададим разные шрифты для заголовков и для основного текста:

        
          
          <h1>Этот заголовок написан шрифтом Roboto без засечек</h1><p>А параграф — шрифтом Roboto Slab с засечками.</p><div class="generic">  <h2>Для второго заголовка установлено семейство sans-serif</h2>  <p>Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками,    установленный в системе по умолчанию.</p></div>
          <h1>Этот заголовок написан шрифтом Roboto без засечек</h1>
<p>А параграф — шрифтом Roboto Slab с засечками.</p>
<div class="generic">
  <h2>Для второго заголовка установлено семейство sans-serif</h2>
  <p>Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками,
    установленный в системе по умолчанию.</p>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          h1 {  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif;}p {  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;}.generic h2 {  font-family: sans-serif;}.generic p {  font-family: serif;}
          h1 {
  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif;
}

p {
  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;
}

.generic h2 {
  font-family: sans-serif;
}

.generic p {
  font-family: serif;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Мы советуем использовать не больше трёх разных семейств шрифтов на одной странице. Например, один для заголовков, другой для обычного текста и третий для подписей.

💡 Не забывай добавлять желаемый тип шрифта (serif, sans-serif или другой), так как нет гарантий, что нужный вам шрифт найдётся на компьютере пользователя.

На практике

Скопировать ссылку "На практике" Скопировано

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

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

🛠 Всегда указывай несколько вариантов шрифтов в следующем порядке:

• Кастомный шрифт;
• Стандартный системный шрифт;
• Семейство шрифтов.

Это нужно на случай, если кастомный шрифт по какой-то причине не загрузился на устройстве пользователя. Если не указывать альтернативу (так называемый фолбэк), то при незагрузке кастомного шрифта дизайн страницы скорее всего полностью сломается. Если указать альтернативный системный шрифт, максимально близкий к кастомному по внешнему виду, то дизайн останется прежним 🎉

Семейство шрифтов указывают на случай, если ни кастомный шрифт не загрузился, ни системный шрифт не нашёлся в системе (такое возможно, поскольку в разных ОС разный набор шрифтов).

+ Развернуть