Question

我的网站上有自定义字体，我将其上传到我的网站。

This是我的网站。

我想将oswaldlight应用于我的所有网站。从现在开始，我已经将字体上传到已知文件夹中，并将其添加为@font-face，如下所示：

@font-face {
font-family: 'oswaldlight';
src: url('../font/oswald/oswald.light-webfont.eot');
src: url('../font/oswald/oswald.light-webfont.eot?#iefix') format('embedded-opentype'),
     url('../font/oswald/oswald.light-webfont.woff2') format('woff2'),
     url('../font/oswald/oswald.light-webfont.woff') format('woff'),
     url('../font/oswald/oswald.light-webfont.ttf') format('truetype'),
     url('../font/oswald/oswald.light-webfont.svg#oswaldlight') format('svg');
font-weight: normal;
font-style: normal;

}

这段代码已添加到我的ftp中。如果你检查每个标题使用哪种字体，你会看到使用Firebug：

element.style {
   color: #000000;
   font-size: 24px;
   font-weight: normal;
   line-height: 40px;
   margin: 12px 0 0;
   padding: 0;
   text-align: left;
   text-transform: uppercase;
}
*::before, *::after {
   box-sizing: border-box;
}
 *::before, *::after {
   box-sizing: border-box;
}
.heading h2 {
   font-family: "oswaldlight";
   font-size: 24px;
   font-weight: normal;
   line-height: 30px;
   text-transform: uppercase;
}

但它仍未适用于我的标题。知道为什么没有应用它吗？

编辑：我看到@Lucky Chingi提到的错误。我在.htcaccess添加了以下几行：

# BEGIN WordPress

Header add (also tried 'set') Access-Control-Allow-Origin "*"

# END WordPress

但它仍然不起作用......有什么建议吗？

Answer 1

您无需在页面上托管字体。 Google快速提供字体。

所以你可以这样做：

@import url(https://fonts.googleapis.com/css?family=Oswald);

使用@font-face将字体导入为'Oswald'。如果您在浏览器中键入上述URL，您还会看到它根据您使用的浏览器动态加载不同的文件。试试Firefox和Chrome，亲眼看看。

现在无论你想要Oswald，只需输入：

font-family: Oswald;

此外，为了获得最佳效果，在加载任何其他CSS之前加载字体。

Answer 2

最后，我的Web域出现问题，指向另一个私有域。过了一会儿，它结束了我的命运领域。谢谢男孩们！

Answer 3

试

*{font:100%/1.0 'oswaldlight';}

确保您到该字体文件的路径正确并且，如果可能，删除标题，某些浏览器的行为与某些标题不同

为什么我的Web自定义字体没有被应用？

3 个答案: