自定义字体无法在 Wordpress 上的其他计算机上呈现

Posted 2023-03-06

【中文标题】自定义字体无法在 Wordpress 上的其他计算机上呈现

【英文标题】：Custom Font Face does not render on other computers on Wordpress

【发布时间】：2021-12-03 04:44:04

【问题描述】：

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

网站是grubexotic.com

我创建了一个子主题，并简单地将字体 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;

它似乎可以在我的计算机上的任何地方工作，但它似乎无法在任何其他设备上工作。我在多个项目中也遇到了这个问题，这有点令人沮丧，因为我觉得这不应该是一个大问题，只是一个简单的实现。我希望它只是我忽略的东西，我在这里错过了什么？

如果您需要更多信息，请告诉我。

【问题讨论】：

很抱歉问了一个相当基本的问题——但您实际上是在使用儿童主题，是吗？因为这些症状听起来好像在您的计算机上一切正常，因为该字体是在本地加载的。

是的，在通过 SFTP 管理的文件中，我将所有六种字体类型添加到我在子主题目录中创建的字体文件夹中。这些来源是实际字体所在的位置，如果您将其中的任何内容复制并粘贴到您的计算机上。但是是的，我的电脑上也安装了字体。

我的查询是子主题是否实际上是已被选中/实际在 WP 网站上使用的主题。

@AHaworth 当我访问我的主题时，列表中唯一的 Grub Exotic 主题处于活动状态。

那么您是否需要激活子主题 - 当您在仪表板中查看主题时，子主题是否会出现？

【参考方案1】：

问题只是全局 H1 占主导地位，尽管尝试使用 !important。将全局 H1 更改为自定义字体似乎可以解决问题。