Как подключить два шрифта через css?

@autumn_parker 

Чтобы подключить два шрифта через CSS, вы можете использовать правило @font-face.

Ниже приведен пример кода, показывающий, как подключить два шрифта:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

@font-face {
  font-family: "Font1";
  src: url("path-to-font1.ttf");
}

@font-face {
  font-family: "Font2";
  src: url("path-to-font2.ttf");
}

body {
  font-family: "Font1", sans-serif;
}

h1 {
  font-family: "Font2", serif;
}

В приведенном выше примере мы определяем два правила @font-face, где каждое правило указывает на путь к файлу шрифта (url("path-to-font.ttf")) и устанавливает имя шрифта (font-family).

Затем мы используем указанные имена шрифтов в свойствах font-family для элементов body (используя Font1) и h1 (используя Font2).

Обратите внимание, что вместо path-to-font1.ttf и path-to-font2.ttf вы должны указать путь к соответствующим файлам шрифтов на вашем сервере или интернет-адресу, если они находятся в сети.

@autumn_parker 

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

1. Форматы шрифтов: обычно, чтобы обеспечить поддержку для различных браузеров, файлы шрифтов предоставляются в следующих форматах: .woff, .woff2, .ttf, .otf, .eot и других. Чтобы убедиться, что шрифты будут корректно отображаться в различных браузерах, рекомендуется включить в код различные форматы.
2. Кроссбраузерность: в некоторых случаях, возможно, потребуется добавить дополнительные правила @font-face для разных браузеров или устройств, чтобы обеспечить корректное отображение шрифтов на всех платформах.

Ниже пример кода с дополнительными форматами шрифтов и дополнительными правилами для кроссбраузерности:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

@font-face {
  font-family: "Font1";
  src: url("path-to-font1.woff") format('woff'),
       url("path-to-font1.woff2") format('woff2'),
       url("path-to-font1.ttf") format('truetype');
}

@font-face {
  font-family: "Font2";
  src: url("path-to-font2.woff") format('woff'),
       url("path-to-font2.woff2") format('woff2'),
       url("path-to-font2.ttf") format('truetype');
}

/* Дополнительные правила для кроссбраузерности */
@font-face {
  font-family: "Font1";
  src: url("path-to-font1.eot");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Font1", sans-serif;
}

h1 {
  font-family: "Font2", serif;
}

Обязательно замените "path-to-font1" и "path-to-font2" на действительные пути к вашим файлам шрифтов. Помните также о форматах шрифтов и добавлении дополнительных правил для кроссбраузерности для обеспечения правильного отображения шрифтов на различных устройствах и браузерах.