我最近在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更改为自定义字体似乎可以解决此问题。