我想弄清楚为什么我的自定义字体没有加载到WordPress(MAMP,Mac,localhost)。
字体存储在wp-content/themes/twentysixteen/fonts/
中
然后在wp-content/themes/twentysixteen/style.css
中我有以下CSS:
@font-face {
font-family: "Averta-Regular";
src: font-url("./fonts/31907B_A_0.eot");
src: font-url("./fonts/31907B_A_0.eot?#iefix") format('embedded-opentype'), font-url("./fonts/31907B_A_0.woff2") format('woff2'), font-url("./fonts/31907B_A_0.woff") format('woff'), font-url("./fonts/31907B_A_0.ttf") format('truetype');
}
html {
font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
}
Chrome向我展示了这个:
只有在操作系统上安装了该字体,它才能正常工作。
4条答案
按热度按时间p4tfgftt1#
尝试将CSS的第3行和第4行的
font-url
更改为url
。看起来它无法识别您尝试加载的自定义字体的源。nhjlsmyf2#
您必须在functions.php中链接该字体,就像这样wp_enqueue_style('custom',get_template_directory_uri(). 'https://fonts.googleapis.com/css?family=Roboto');
nuypyhwy3#
下载一个ttf字体,一个商业上可用的字体,访问https://1001fonts.com/free-fonts-for-commercial-use.html?page=1&items=10粘贴一个副本到你的主题中,然后像上面一样使用@font-face。一切都应该正常。当我在本地服务器上开发时,一切都正常。发布到public_html时,字体拒绝加载。不得不改为ttf。你也可以尝试其他网络字体格式,但TTF工作得很好。更好的是,你可以使用谷歌字体。
ru9i0ody4#
我遇到了类似的东西,当我使用这个wordpress未编码儿童主题和上传自定义字体。
我意识到这是因为我没有用a结束第二个src属性;
一旦我更换了它,字体就起作用了。愚蠢的错误,但在你工作了几个小时后很难发现。