Как подключить несколько шрифтов в html?

Question

[Леонид Калашников]

Как использовать разные шрифты на одном сайте?
Я подключаю через гугл фонтс 3 вида одного шрифта

<link href="(тут https) fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,700&display=swap" rel="stylesheet">

Но в css написано нужно вставлять font-family: 'IBM Plex Sans', sans-serif;.
То есть, текст становится одним стилем данного шрифта.
Как задавать определённый стиль?
То есть как, прописать для одного тега <p> шрифт regular 400, а для другого тега <p> bold 700 italic, а один <p> вообще поставить в шрифт Open sea?

Comments

[Froggyweb]

ну в сss есть селекторы, там можно определить начертание и "жирность" шрифта..... Потренируйся на Arial.

то есть как прописать для одного тега шрифт regular 400
А для другого тега bold 700 italic

так и написать
p {font: bold 14px/1.2 'IBM Plex Sans',}

[Ankhena]

но в css написано нужно вставлять font-family: 'IBM Plex Sans', sans-serif;

Да, потому что font-family у них один общий.
А различается только жирность и/или начертание.

Если основной шрифт на сайте IBM Plex Sans, то для body прописывайте:
font-family: "IBM Plex Sans", sans-serif;
Затем, для тех блоков, которым нужна жирность отличная от 400 или той, что вы дополнительно указали для body, задаете свой font-weight.

Всё аналогично тому, как вы пишете про размер шрифта.

Answer 1

[Сергей delphinpro]

То есть как, прописать для одного тега шрифт regular 400, а для другого тега bold 700 italic, а один вообще поставить в шрифт Open sea?

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

p.one {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
}
p.two {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-style: italic;
}
p.three {
  font-family: 'Open Sea', sans-serif;
}

Как отметили выше, основное семейство шрифта лучше задать для всей страницы, в нужных местах менять только жирность и начертание.

Comments

[Леонид Калашников]

спасибо большое

Answer 2

[besbesArt]

.p-one {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
}
.p-two {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-style: italic;
}

Comments

[Леонид Калашников]

спасибо

Answer 3

[moreqa]

Font weight