Css 字体不适用于手机的某一部分

我正在为Shopify使用一种自定义字体，我已经将它添加到我的css文件中。我在这个网站上也使用了另一种字体，我插入这种字体的每个地方在桌面和手机上都工作得很好。我唯一想使用第二种字体（Arial黑色）的地方是节标题

我在CSS中插入了这个，但它没有出现在手机上，只出现在桌面上：

       @font-face {
          font-family:  'Arial Black', sans-serif; 
           src: url({{'Arial_Black.ttf'| asset_url }});
                url({{'Arial-Black.woff'| asset_url }});
                url({{'Arial-Black.woff2'| asset_url }});
                url({{'Arial_Black.otf'| asset_url }}); 
           font-weight: normal;

    .section-header h2 {
     font-family: "Arial Black", sans-serif !important;
     font-weight: 900 !important;
     font-size: 30px ; 
        }

你知道我如何让这种字体只适用于我的手机网站的这一部分吗？

---

字体的路径正确吗？我会尝试使用绝对路径以防万一。如果您不确定路径，请检查开发人员工具（它正在使用的工具）中的另一个页面的“源”选项卡，您将找到路径

编辑：

刚刚选中，在mobile中，有一个样式规则将标题设置为

.h1, .h2, h1, h2 {
margin: 0 0 17.5px;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
line-height: 1.2;
overflow-wrap: break-word;
word-wrap: break-word;

}

您需要将以下内容添加到css以覆盖此内容（我仅将其应用于h2，但如果您愿意，可以添加h1）：

---

这应该可以解决它

字体的路径正确吗？我会尝试使用绝对路径以防万一。如果您不确定路径，请检查开发人员工具（它正在使用的工具）中的另一个页面的“源”选项卡，您将找到路径

编辑：

刚刚选中，在mobile中，有一个样式规则将标题设置为

.h1, .h2, h1, h2 {
margin: 0 0 17.5px;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
line-height: 1.2;
overflow-wrap: break-word;
word-wrap: break-word;

}

您需要将以下内容添加到css以覆盖此内容（我仅将其应用于h2，但如果您愿意，可以添加h1）：

---

这应该可以修复它

我使用了这个路径，因为字体文件是作为“资产”上传到Shopify的。你能解释一下你所说的另一个pages sources选项卡是什么意思吗？当你上传该资源时，它会给你该资源的url吗？“源代码”选项卡是开发人员工具的一部分，但不用担心。你介意链接它工作的页面和它不工作的页面吗？当我上传它时，它不会提供直接链接，我只是将URL输入到资产本身，通常只是文件本身的名称。我只是感到困惑，因为我在我的另一个网站上使用了完全相同的代码（尽管字体不同），所有字体的更改也出现在手机上：（可能有什么东西正在覆盖移动设备上的样式，如媒体查询。如果您右键单击未更改的文本，然后选择inspect element，我们可能会尝试找出发生了什么。如果您将我指向不工作的页面的确切url，我可以检查它，但请删除您的密码，因为您永远不知道谁会使用它。）恶意输入！我使用了该路径，因为字体文件是作为“资产”上载的在Shopify上。你能解释一下你所说的另一个页面源选项卡是什么意思吗？当你上传该资源时，它会给你该资源的url吗？源选项卡是开发人员工具的一部分，但不用担心。你介意链接它工作的页面和它不工作的页面吗？当我上传它时，它不会给你一个直接链接，我只是将URL输入到资产本身，这通常只是文件本身的名称。我只是感到困惑，因为我在我的另一个网站上使用了完全相同的代码（虽然字体不同），所有字体更改也出现在手机上：（可能有什么东西正在覆盖移动设备上的样式，如媒体查询。如果您右键单击未更改的文本，然后选择inspect element，我们可能会尝试找出发生了什么。如果您将我指向不工作的页面的确切url，我可以检查它，但请删除您的密码，因为您永远不知道谁会使用它。）恶意进入！