Question

我正在尝试使用圆形字体，但是由于某种原因，它退回到了“ arial” 这是我的
fonts.css文件：

/* Light Font */
@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Light.eot");
    src: url("../fonts/Circular/CircularWeb-Light.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Light.woff2") format("woff2");
    font-weight: 300;
}

@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Light.eot");
    src: url("../fonts/Circular/CircularWeb-Light.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Light.woff2") format("woff2");
    font-style: italic;
    font-weight: 300;
}
/* End Light Font */


/* Normal Font */
@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Book.eot");
    src: url("../fonts/Circular/CircularWeb-Book.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Book.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Book.eot");
    src: url("../fonts/Circular/CircularWeb-Book.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Book.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
}
/* End Normal Font */


/* Medium Font */
@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Medium.eot");
    src: url("../fonts/Circular/CircularWeb-Medium.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Medium.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Medium.eot");
    src: url("../fonts/Circular/CircularWeb-Medium.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Medium.woff2") format("woff2");
    font-style: italic;
    font-weight: 500;
}
/* End Medium Font */


/* Bold Font */
@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Bold.eot");
    src: url("../fonts/Circular/CircularWeb-Bold.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Bold.woff2") format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Bold.eot");
    src: url("../fonts/Circular/CircularWeb-Bold.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Bold.woff2") format("woff2");
    font-style: italic;
    font-weight: 700;
}
/* End Bold Font */


/* Black Font */
@font-face {
   font-family: "CircularWeb";
   src: url("../fonts/Circular/CircularWeb-Black.eot");
   src: url("../fonts/Circular/CircularWeb-Black.woff") format("woff"),
        url("../fonts/Circular/CircularWeb-Black.woff2") format("woff2");
   font-weight: 900;
}

@font-face {
   font-family: "CircularWeb";
   src: url("../fonts/Circular/CircularWeb-Black.eot");
   src: url("../fonts/Circular/CircularWeb-Black.woff") format("woff"),
        url("../fonts/Circular/CircularWeb-Black.woff2") format("woff2");
   font-weight: 900;
   font-style: italic;
}
/* End Black Font */

这是我使用字体的SASS：

$font-family-primary: "CircularWeb", Arial, sans-serif;

@media print {
  body, html {
    font-family: "CircularWeb", Arial, sans-serif;
  }
}

*,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "CircularWeb", Arial, sans-serif;
}

我为此尝试了多种不同的方法，但是似乎没有任何效果。也许我做错了，所以我愿意接受任何建议。我编译的CSS目录：root / css。我的字体目录：root / fonts

如果我转到：mysite.com/fonts/Circular/CircularWeb-Light.eot，它将保存字体，所以我知道我使用的是正确的目录。任何帮助将不胜感激。（我从未只从fonts.google添加本地目录中的字体）

Answer 1

故障排除步骤：

在线测试
尝试其他字体
尝试使用一个字体声明
仔细检查字体文件路径
检入开发工具（Chrome中为f12），以确保在声明的元素上声明了字体

字体无效，但路径正确

1 个答案: