html - Html 不读取字体

Question

我为我的项目准备了字体。Museo Sans 有 5 种不同的重量。我需要使用@font-face 并在我的网站中使用它们。

@font-face {
font-family: "Museo Sans 100";
src: url('/app/fonts/museosans-100-webfont.ttf') format('opentype');
font-weight: 100;
}
@font-face {
font-family: "Museo Sans 300";
src: url('/app/fonts/museosans-300-webfont.ttf') format('opentype');
font-weight: 300;
}

@font-face {
font-family: "Museo Sans 500";
src: url('/app/fonts/museosans-500-webfont.ttf') format('opentype');
font-weight: 500;
}
@font-face {
font-family: "Museo Sans 700";
src: url('/app/fonts/museosans-700-webfont.ttf') format('opentype');
font-weight: 700;
}
@font-face {
font-family: "Museo Sans 900";
src: url('/app/fonts/museosans-900-webfont.ttf') format('opentype');
font-weight: 900;
}


//Font Variables
//-----
$font: 'Museo Sans 100';


@import '../utilities/fonts';

 html {
 font-family: $font;
  }

.wrapper {
  margin: 0 auto;
  max-width: 1644px;
  padding: 0 14.024390243%;
  width: 100%;
}

当我在我的 scss 中调用它时，我可以在检查我的 html 时看到它，但字体保持不变.. 没有任何反应。有什么意见吗？PS我得到的字体都是ttf。

这是我得到的错误：

museosans-100-webfont.ttf:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

标签： htmlcssfontssassfont-face