Чтобы добавить веб-шрифт в CSS и HTML, вы должны выполнить следующие действия:
- Скачайте и скопируйте файлы шрифта на ваш веб-сервер или используйте ссылку на файлы, хранящиеся на другом сервере.
- Добавьте ссылку на файл шрифта в раздел
<head>
HTML-документа с помощью HTML-элемента<link>
. Например, для шрифта Open Sans ссылка может выглядеть следующим образом:
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
Эта ссылка загружает Open Sans с помощью Google Fonts API. Вы можете использовать также другие сервисы шрифтов или загружать файл шрифта непосредственно на свой веб-сервер.
- Добавьте свойства CSS, указывающие, какой шрифт использовать для различных HTML-элементов. Например, чтобы использовать шрифт Open Sans для всех заголовков первого уровня, вы можете использовать следующий CSS-код:
h1 {
font-family: 'Open Sans', sans-serif;
}
Здесь font-family
устанавливает шрифт для элементов селектора h1
.
Рекомендуется также указывать альтернативные семейства шрифтов, которые будут использоваться в случае, если запрошенный шрифт недоступен или не может быть загружен. В приведенном выше примере мы использовали значение sans-serif
для этой цели.