无法使用@font-face 显示自定义字体答案

【问题标题】：Can't get custom fonts to show using @font-face无法使用@font-face 显示自定义字体
【发布时间】：2020-07-21 17:52:07
【问题描述】：

我正在使用@font-face 尝试让字体“Archisto”加载到我的网页上。我是构建网页和使用@font-face 的新手。我遵循了几个教程的所有步骤，并查看了这里的几个线程，但我无法加载字体。

我在http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/css/Archistico.css文件夹中上传了css文件

我在http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF文件夹中上传了字体文件

.css 文件中的@font-face 代码如下所示：

@font-face {
    font-family: Archistico;
    src: url(http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF);

}

我使用如下所示的自定义 CSS 调用字体：

.page-content h5{
    font-family: 'Archistico' !important;
    font-size: 50px !important;
    display: inline !important;
    color: #231400 !important;
}

我试图让它工作的页面是：www.unfoldmyworld.com

非常感谢您的帮助！

【问题讨论】：

您是否检查过您的字体是否已下载到网络选项卡中的浏览器？还要在src 中的url 之后添加format('truetype')。
@jebin 我添加了格式（'truetype'）。它没有改变任何东西。另外，字体没有下载到浏览器！
您在网络中遇到什么错误？它是说混合内容还是任何其他错误？它甚至显示在正在下载的字体列表中吗？

标签： css wordpress fonts font-face

【解决方案1】：

您是否尝试过使用相对 url？我正在考虑一个 CORS（跨域资源共享）问题。

@font-face {
   font-family: Archistico;
   src: url('../fonts/FONT_11.TTF');
}

【讨论】：

【解决方案2】：

1- 添加到网页头部。<link href="//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico" rel="stylesheet" type="text/css"/>

-2 使用@import CSS 指令，将以下行添加到您的css 文件中。(http | https)

@import url(//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico);

-3 使用font-face声明字体。(http | https)

@font-face {font-family: "Archistico"; src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot"); src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff") format("woff"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.svg#Archistico") format("svg"); }

让我知道这是否适合你 :) 谢谢

【讨论】：

@Denise 很高兴我帮助了你 :) 你能纠正我的答案并投票吗