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

Question

[Ingernirated]

Всем привет!
Подскажите, как объединить в одно семейство, подключенные 2 и более файлов со шрифтами, чтобы с одним указанием семейства font-family: 'Muli', sans-serif; их размер менялся при указании через font-weight?
(thin, regular, bold) - (300, 500, 700);

Так это выглядит через ссылку

<link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700&display=swap" rel="stylesheet">

и с таким подключением

p,a,h1,h2,h3,h4,h5 {
     font-family: 'Muli', sans-serif;
}

Мы всего лишь указываем font-weight:300, 400, 500 или 700 и размерность подбирается уже при наличии подключенных файлов, что если в подключении есть thin, то он будет изображаться при font-weight:300.

Как сделать такой же метод изменения толщины, но при условии, что файлы подгружены с нашего сервера, а не с гугла?

Comments

[Алекс Глебов]

На каждый вариант стиля нужен свой файл шрифта.
И в гугле, если перейти по ссылке, в итоге куча подключений.

[Ingernirated]

Алекс Глебов, я не про это.
Вот у меня есть 6 вариантов стиля шрифта.
Как мне их подключить все так, чтобы я мог их все задать через

p,a,h1,h2,h3,h4,h5 {
     font-family: 'Muli', sans-serif;
}

Обычно при подключении одного стиля создается его название, т.е. 6 подключений, 6 названий font-family.
А мне нужно сделать 6 подключений, но с одним названием, как показано выше и менять их толщину через свойство font-weight, где при наличии стиля thin при значении font-weight:300 он выдаст его, при отсутствии, пойдёт искать дальше и выдаст уже regular например, или при значении 500 выдаст regular, а при 700 bold.

[Алекс Глебов]

Ingernirated, вот так тогда

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src:
       url('/fonts/awesome-700.woff2') format('woff2'), 
       url('/fonts/awesome-700.woff') format('woff'); 
}

тут все описано
https://developers.google.com/web/fundamentals/per...

[Ingernirated]

Алекс Глебов, так здесь один и тот же стиль подключен.
а мне нужно что-то на подобии

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src:
       url('/fonts/awesome-thin.woff2') format('woff2'), 
       url('/fonts/awesome-regular.woff2') format('woff2'),
       url('/fonts/awesome-bold.woff2') format('woff2'); 
}

что бы много стилей в одном названии font-family, где выбор стиля будет выбираться через font-weight уже.

У меня та ссылка не открывается.

[Ingernirated]

<link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700&display=swap" rel="stylesheet">

Как эта строка подключения будет выглядеть на css, если у нас файлы хранятся локально на сервере?

[Алекс Глебов]

Ingernirated,
ну перейди, там внутри css
https://fonts.googleapis.com/css?family=Muli:300,4...

нужно несколько @font-face
у них одинаковые font-family
различаются файлы и font-weight

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src:
       url('/fonts/awesome-700.woff2') format('woff2'), 
       url('/fonts/awesome-700.woff') format('woff'); 
}
@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 300;
  src:
       url('/fonts/awesome-300.woff2') format('woff2'), 
       url('/fonts/awesome-300.woff') format('woff'); 
}

[Ingernirated]

Алекс Глебов, спасибо огромное!