@ font-face css添加自定义字体

我有一个wordpress主题，我想添加自定义字体。我在其中放置字体文件的主题文件中添加了一个“字体”文件夹。@ font-face css添加自定义字体

现在我的CSS是这样的：

@font-face { 
font-family: Brandon; 
src: url('/domains/test.innerwhy.com/html/wp-content/themes/thefox/fonts/Brandon_bld.otf'); 
font-weight: normal; 
} 
h1 { 
font-family: Brandon; 
}

然而，这似乎并没有工作，我不明白为什么。

来源

2017-01-16 Joel

您是否尝试过使用Web浏览器开发工具查看控制台？如果找不到或加载字体，这会给你一个错误。可能是一个开始的好地方。 – mikey242

'src：url（'/ domains/test.innerwhy.com/html/...' - 看起来很像文件系统路径（基于文件夹名称），而它应该是一个（相对）URL。不知道有什么区别，那么这是你应该首先阅读的第一件事 – CBroe

通过查看我只能建议您检查从css文件路径是否正确。在字体加载失败的情况下设置回落也是很好的。您可能也会错过设备支持的字体文件类型。

来源

2017-01-16 13:36:54 Sparkz

它不工作，因为src路径是错误的。 “/domains/test.innerwhy.com/html/wp-content/themes/thefox/fonts/Brandon_bld.otf”

您可以在本地下载的字体文件，并使用这样的：

@font-face { 
font-family: 'Montserrat-Regular'; 
src: url('../fonts/montserrat-regular-webfont.eot'); 
src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/montserrat-regular-webfont.woff2') format('woff2'), 
    url('../fonts/montserrat-regular-webfont.woff') format('woff'), 
    url('../fonts/montserrat-regular-webfont.ttf') format('truetype');

}

来源

2017-01-16 13:54:55

当我尝试这个开发工具的控制台说：无法加载资源：服务器响应状态404（不找到） – Joel

你可以从这个链接下载，然后在线生成网页字体。https://github.com/piamancini/landing/tree/master/fonts –

@ font-face css添加自定义字体

回答

相关问题