css - 通常のフォントが読み込まれないのに太字のフォントが読み込まれる理由

Question

考えられる理由は、他のフォントを読み込めないことです。これは私のfonts.cssファイルです

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Regular.ttf) format("truetype");
  font-style: normal;
  @apply .font-normal;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Light.ttf) format("truetype");
  font-style: normal;
  @apply .font-light;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-SemiBold.ttf) format("truetype");
  font-style: normal;
  @apply .font-semibold;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Italic.ttf) format("truetype");
  font-style: normal;
  @apply .font-normal;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Bold.ttf) format("truetype");
  font-style: normal;
  @apply .font-bold;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Black.ttf) format("truetype");
  font-style: normal;
  @apply .font-black;
}

ただし、太字のものは通常のフォントではなく表示されるだけです

黒いフォントのみが読み込まれる/太字のフォントのみが読み込まれることを確認してください..

Answer 1

font-familyフォントフェイスごとに異なる名前を使用する必要があります

@font-face {
  font-family: "Source Sans Pro normal";
  src: url(../assets/fonts/sans/SourceSansPro-Regular.ttf) format("truetype");
  font-style: normal;
  @apply .font-normal;
}

@font-face {
  font-family: "Source Sans Pro light";
  src: url(../assets/fonts/sans/SourceSansPro-Light.ttf) format("truetype");
  font-style: normal;
  @apply .font-light;
}

@font-face {
  font-family: "Source Sans Pro semibold";
  src: url(../assets/fonts/sans/SourceSansPro-SemiBold.ttf) format("truetype");
  font-style: normal;
  @apply .font-semibold;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Italic.ttf) format("truetype");
  font-style: normal;
  @apply .font-normal;
}

@font-face {
  font-family: "Source Sans Pro bold";
  src: url(../assets/fonts/sans/SourceSansPro-Bold.ttf) format("truetype");
  font-style: normal;
  @apply .font-bold;
}

@font-face {
  font-family: "Source Sans Pro black";
  src: url(../assets/fonts/sans/SourceSansPro-Black.ttf) format("truetype");
  font-style: normal;
  @apply .font-black;
}