字体无法在Mobile的某一部分上使用

问题描述

我正在使用Shopify的自定义字体，该字体已添加到CSS文件中。我也在该站点上使用了另一种字体，并且我插入该字体的每个位置在台式机和移动设备上都可以正常工作。我要使用第二种字体（Arial Black）的唯一位置是节标题。

我将此插入了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 ; 
        }

关于如何使该字体仅在我的移动网站的这一部分起作用的任何想法？

解决方法

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

编辑：

只需检查一下，在移动设备中时，就会有一个样式规则将标头设置为

.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）：

h2,.h2 {
     font-family:  'Arial Black',Gadget,sans-serif !important;
}

这应该解决

font-face shopify