Shopify自定义字体IntegralCF-Regular在Safari浏览器无法加载

原代码存在的问题 #

• 语法错误：第一个@font-face的src声明末尾多余逗号，未正确闭合，Safari对CSS语法错误的容错性更低，会直接忽略该规则。
• local()用法错误：local()的参数应为用户本地已安装的字体名称（如'Integral CF Regular'），而非字体文件URL，错误参数会导致Safari无法识别有效字体来源。
• 字体规则冲突：第二个@font-face使用相同字体族名，却指定了font-weight:600和font-style:italic，但引用的是常规字体文件，会造成字体样式匹配混乱。
• 无效属性：在元素选择器中添加src属性不符合CSS规范，src仅能在@font-face规则中定义。

修正后的CSS代码 #

/* 常规字重、常规样式的字体声明 */
@font-face {
    font-family: 'IntegralCF-Regular';
    src: local('Integral CF Regular'),
         url('https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff2') format('woff2'),
         url('https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff?v=1645097830') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* 若有对应600字重斜体字体，请替换为正确文件URL；若无则删除此规则 */
@font-face {
    font-family: 'IntegralCF-SemiBoldItalic';
    src: url('此处替换为600字重斜体字体的woff2文件URL') format('woff2'),
         url('此处替换为600字重斜体字体的woff文件URL') format('woff');
    font-weight: 600;
    font-style: italic;
}

/* 应用字体到目标元素 */
.header-wrapper span, 
.footer-section h4, 
.footer-section p, 
.footer-section span, 
.footer-section button#Subscribe-footer-newsletter-section, 
.footer-section li {
    font-family: 'IntegralCF-Regular', sans-serif; /* 添加无衬线字体作为降级选项 */
    font-weight: 400; /* 明确指定字重，避免浏览器自动推断 */
    font-style: normal;
}

额外注意事项 #

1. 确保字体文件URL可正常访问，Shopify CDN默认已配置正确CORS规则，无需额外设置；若使用外部存储需确认CORS权限。
2. 优先使用woff2格式（压缩率更高、加载更快），woff作为兼容旧版浏览器的降级方案。
3. 不同字重或样式的字体需单独创建@font-face规则，匹配对应的font-weight/font-style值。

内容的提问来源于stack exchange，提问作者Umer Zulfiqar