Почему не меняется шрифт в зависимости от жирности?

Question

[Incold]

Здравствуйте! Я хочу подключать разные шрифты, в зависимости от font-weight, но при указании его указании, ничего не меняется
Вот шрифты:

@font-face {
    font-family: 'Muller';
    src: url('fonts/MullerMedium.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'MullerBold';
    src: url('fonts/MullerBold.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: 'MullerBold';
    src: url('fonts/MullerBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

index.css

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background: #F6F6F6;
  line-height: 1;
  font-family: "Muller", "MullerBold" , sans-serif;
}

Однако везде стоит шрифт Muller, когда в body font-family, меняю шрифты местами (т.е. "MulleBold", "Muller"), то везде шрифт становится MullerBold.
Как это исправить? Заранее, спасибо, за любую помощь!

Answer 1

[Сергей delphinpro]

Вы подключаете один и тот же шрифт и хотите чтобы он у вас отображался по разному?
Странное желание.

Во-первых, не нужно подключать ttf. Он огромен. Прогоните шрифт через трансфонтер и подключайте форматы woff2 и woff.

Во-вторых, у вас должны быть разные файлы с разными весами. Вот их все и нужно подключить, указывая соответствующий font-weight.

@font-face {
    font-family: 'MullerBold';
    src: url('fonts/MullerBold-normal.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'MullerBold';
    src: url('fonts/MullerBold-bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
}

Answer 2

[Владислав Черненко]

@font-face {
    font-family: 'Muller';
    src: url('fonts/MullerMedium.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Muller';
    src: url('fonts/MullerBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

body{
    font-family: 'Muller';
    font-weight: 400;
}

p{
    font-weight: 700;
}