Как изменить или подключить шрифт в CSS

Большинство текстовых элементов по умолчанию имеют шрифт Times New Roman. В CSS есть возможность установить другие шрифты. Также в CSS можно подключить шрифт, который изначатьно не был предусмотрен в браузерах. В этой теме мы рассмотрим, как это сделать.

Семейства шрифтов

Шрифты подразделяются на семейства. Существуют такие семейства шрифтов:

serif - с засечками

sans-serif - без засечек

monospace - моноширинные

cursive - курсивные

fantasy - декоративные

Безопасные шрифты

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

Times New Roman, serif

Georgia, serif

Arial, sans-serif

Verdana, sans-serif

Tahoma, sans-serif

Impact, sans-serif

Trebuchet MS, sans-serif

Courier New, monospace

Comic Sans MS, cursive

Другие шрифты Вы можете найти, если наберёте в любом поисковике: стандартные шрифты.

Установка шрифта

Чтобы изменить или подключить шрифт в CSS используется свойство font-family. Значением этого свойства является название шрифта. Для примера создадим абзац и установим ему шрифт:

Стиль:

7
8
9
10

p
  {
  font-family: Arial;
  }

HTML код:

14	<p>Текст</p>

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

11
12
13
14

h1
  {
  font-family: "Times New Roman";
  }

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

Пример:

15
16
17
18

div
  {
  font-family: Tahoma, Verdana, sans-serif;
  }

Как подключить нестандартный шрифт в CSS

Кроме шрифтов, которые содержатся в операционной системе пользователя, можно использовать и другие шрифты. Их можно найти в интернете или создать самостоятельно. Существует много нестандартных шрифтов. Их можно найти, через поисковик. Файл шрифта нужно скачать и присоединить к странице. Некоторые шрифты являются платными. Об этом должна быть информация на странице, с которой Вы скачиваете шрифт.

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

Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны быть два свойства: в свойстве font-family указывается название шрифта, под которым он будет использоваться на сайте. Название Вы выбираете сами. А в свойстве src указывается путь к файлу шрифта.

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

Для примера я использую файл шрифта unineue.woff. Он располагается в той же папке, что и страница. Шрифт я назову Nfont.

Стиль:

7
8
9
10
11
12
13
14
15
16

@font-face
  {
  font-family: Nfont;
  src: url("unineue.woff");
  }
#text
  {
  font-family: Nfont;
  font-size: 40px;
  }

HTML код:

31	<div id="text">Текст с нестандартным шрифтом</div>

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

7
8
9
10
11
12

@font-face 
  {
  font-family: Nfont; 
  src: url("unineue.woff") format("woff"),
  url("unineue.ttf") format("truetype");
  }