html - 使用@font-face

Question

我正在尝试通过@font-face 使用自定义字体，出于某种原因，它在某些地方有效，而在其他地方无效。

CSS 这很好用

#hero-header .title {
    color: #fff;
    padding-top: 225px;
    font-size: 30px;
    font-family: 'Populaire';
    text-align: center;
    font-size: 64px;
    }

这不是

ul#reviews h2 {
    font-size: 30px;
    font-family: 'Populaire';
    }

注意英雄区域使用自定义字体但无法在页面下方使用它，即:评论标题。

Answer 1

你的 CSS 是:

@font-face {
    font-family: 'Populaire';
    src: url('font/Populaire.otf');
}

但是，字体实际上在 /beta/styles/css/fonts/Populaire.otf 中，请将您的 CSS 更新为:

@font-face {
    font-family: 'Populaire';
    src: url('/beta/styles/css/fonts/Populaire.otf');
}