Shopify店铺为特定语言设置自定义字体的技术咨询

1. 先上传字体文件到Shopify #

把你的英语、阿拉伯语字体文件（推荐用woff2格式，兼容性最优）上传到Shopify后台的「内容 > 文件」里，上传后复制每个字体的文件URL备用。

2. 正确的语言选择逻辑 #

你之前用shop-locale-ar选择器无效，是因为Shopify会把语言标识加到<body>或<html>标签的class/属性里，比如阿拉伯语页面的<body>会有locale-ar类，或者<html>标签有lang="ar"属性，用这些来做选择器才对。

3. 两种实现方法 #

方法一：纯CSS全局设置（推荐） #

在主题的「自定义 > 主题设置 > 自定义CSS」或者编辑theme.liquid的<head>里添加以下代码：

/* 引入英语字体 */
@font-face {
  font-family: 'YourEnglishFont'; /* 替换成你的字体名称 */
  src: url('这里替换成英语字体的Shopify文件URL') format('woff2');
  font-display: swap; /* 避免字体加载时页面闪烁 */
}

/* 引入阿拉伯语字体 */
@font-face {
  font-family: 'YourArabicFont'; /* 替换成你的字体名称 */
  src: url('这里替换成阿拉伯语字体的Shopify文件URL') format('woff2');
  font-display: swap;
}

/* 默认应用英语字体 */
body {
  font-family: 'YourEnglishFont', sans-serif;
}

/* 阿拉伯语页面替换字体 */
body.locale-ar {
  font-family: 'YourArabicFont', sans-serif;
}

如果部分元素需要单独设置，比如标题，可以追加：

body.locale-ar h1, body.locale-ar h2 {
  font-family: 'YourArabicFont', serif;
}

方法二：Liquid条件加载（适合需要差异化配置的场景） #

编辑theme.liquid文件，在<head>标签内添加以下Liquid代码：

{% if request.locale.iso_code == 'en' %}
  <style>
    @font-face {
      font-family: 'YourEnglishFont';
      src: url('英语字体URL') format('woff2');
      font-display: swap;
    }
    body, h1, h2 {
      font-family: 'YourEnglishFont', sans-serif;
    }
  </style>
{% elsif request.locale.iso_code == 'ar' %}
  <style>
    @font-face {
      font-family: 'YourArabicFont';
      src: url('阿拉伯语字体URL') format('woff2');
      font-display: swap;
    }
    body, h1, h2 {
      font-family: 'YourArabicFont', sans-serif;
    }
  </style>
{% endif %}

注意事项 #

• 确保字体文件格式正确，woff2是目前浏览器支持最好的格式；
• 测试时切换语言查看效果，若字体未生效，检查URL是否正确、字体名称是否一致；
• 如果主题本身有字体设置，可能需要覆盖原有样式，可在CSS属性后加!important（尽量少用，优先调整选择器优先级）。

内容的提问来源于stack exchange，提问作者Youssef Maher