自定义字体面不能在Wordpress上的其他计算机上呈现



我最近在Wordpress上开始了一个项目,我实现的自定义字体在其他计算机上似乎不起作用。

网站:grubexotic.com

我创建了一个子主题,并简单地将字体face css放入子主题的style.css文件中。

/*
Theme Name:   Grub Exotic
Theme URI:    https://www.elementor.com/
Description:  Grub Exotic using hello-elementor
Author:       Studio 8472
Author URI:   https://www.studio8472.com/
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor
*/
@font-face {
font-family: "Arfelick Feather";
src: url(https://www.grubexotic.com/wp-content/themes/grubexotic/fonts/arfelickfeather/Arfelick-Feather.eot) format("embedded-opentype"),
url(https://www.grubexotic.com/wp-content/themes/grubexotic/fonts/arfelickfeather/Arfelick-Feather.otf) format("opentype"),
url(https://www.grubexotic.com/wp-content/themes/grubexotic/fonts/arfelickfeather/Arfelick-Feather.svg) format("svg"),
url(https://www.grubexotic.com/wp-content/themes/grubexotic/fonts/arfelickfeather/Arfelick-Feather.ttf) format("truetype"),
url(https://www.grubexotic.com/wp-content/themes/grubexotic/fonts/arfelickfeather/Arfelick-Feather.woff) format("woff"),
url(https://www.grubexotic.com/wp-content/themes/grubexotic/fonts/arfelickfeather/Arfelick-Feather.woff2) format("woff2");
font-weight: normal;
font-style: normal;
}

我在Elementor中有一个自定义的html小部件,我只是调用字体族。

.comingsoon_header {
z-index: 11;
position: absolute;
top: 15%;
left: 50%;
text-align: center;
transform: translateX(-50%) rotate(-15deg);
font-family: "Arfelick Feather"; 
color: white;
text-shadow: 0 0 3px black;
font-size: 10rem;
}

它似乎在我的电脑上无处不在,但在其他设备上似乎不起作用。我在不止一个项目中遇到过这个问题,这有点令人沮丧,因为我觉得这不应该是一个大问题,只是一个简单的实现。我希望这只是我忽视的东西,我在这里错过了什么?

如果你需要更多的信息,请告诉我。

问题很简单,尽管尝试使用!important,全局H1仍然占主导地位。将全局H1更改为自定义字体似乎可以解决此问题。

相关内容

最新更新