Простой CSS

Подключение #

Кастомный шрифт на страницу можно подключить примерно таким кодом:

@font-face {
  font-family: 'My Font';
  src: url('../myfont.woff2') format('woff2'),
       url('../myfont.woff') format('woff');
}

Формат woff поддерживается всеми современными браузерами. Шрифты в формате woff2 весят меньше, но с поддержкой у них пока не очень, поэтому нужно указывать оба формата, чтобы браузер сам выбрал тот, который он понимает.

Порядок перечисления форматов тоже имеет значение: если браузер поддерживает woff2, но первым в списке будет woff, браузер использует woff и не будет искать дальше. Чтобы браузер с поддержкой woff2 смог выбрать нужный формат, woff2 должен идти в списке первым.

Различные начертания #

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

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

• Плохо

  /* подключение */
  @font-face {
    font-family: 'My Font';
    src: url('../myfont.woff2') format('woff2'),
         url('../myfont.woff') format('woff');
  }
  @font-face {
    font-family: 'My Font Light';
    src: url('../myfontLight.woff2') format('woff2'),
         url('../myfontLight.woff') format('woff');
  }
  @font-face {
    font-family: 'My Font Bold';
    src: url('../myfontBold.woff2') format('woff2'),
         url('../myfontBold.woff') format('woff');
  }
  
  /* использование */
  BODY {
    font-family: 'My Font', Arial, sans-serif;
  }
  .page__title {
    font-family: 'My Font Bold', Arial, sans-serif;
  }
  .page__slogan {
    font-family: 'My Font Light', Arial, sans-serif;
  }

• Хорошо

  /* подключение */
  @font-face {
    font-family: 'My Font';
    src: url('../myfont.woff2') format('woff2'),
         url('../myfont.woff') format('woff');
    font-weight: 400;
  }
  @font-face {
    font-family: 'My Font';
    src: url('../myfontLight.woff2') format('woff2'),
         url('../myfontLight.woff') format('woff');
    font-weight: 100;
  }
  @font-face {
    font-family: 'My Font';
    src: url('../myfontBold.woff2') format('woff2'),
         url('../myfontBold.woff') format('woff');
    font-weight: 700;
  }
  
  /* использование */
  BODY {
    font-family: 'My Font', Arial, sans-serif;
  }
  .page__title {
    font-weight: 700;
  }
  .page__slogan {
    font-weight: 100;
  }

Наследование стилей текста #

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

Обычно основной шрифт задаётся в body, и почти все элементы страницы автоматически его наследуют. Исключение составляют элементы формы: input, textarea, select и button — браузер старается привести их шрифт к системному. Чтобы эти элементы тоже наследовали свойства текста, нужно прописать в стилях font: inherit. Если нужно унаследовать только шрифт, будет достаточно font-family: inherit.