如何在 Magento 2 中更改子主题的字体
默认情况下，Luma 主题使用名为“Open Sans”、“Helvetica Neue”、Helvetica、Arial、sans-serif 的字体系列，您可以在此处查看。
您可以将此字体用于您的商店，但是，如果您想将其更改为另一种字体。
我想更改字体为：font-family: ‘Inter’, sans-serif; 具体使用方法如下：
- 第 1 步：声明新的字体
- 访问 https://fonts.google.com/ 免费字体
- 选择您要使用的字体
- 将路径 vendor\magento\theme-frontend-blank\web\css\source\ 中名为 _typography.less 的文件复制到路径 app\design\frontend\panduola\mok\web\css\source\
- 更改字体
打开地址：https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap
找到
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYAZ9hiJ-Ek-_EeA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}删除 _typography.less 里面原来的代码
& when (@media-common = true) { 删除xxxxxx }复制上面字体代码到 _typography.less 文件中，结果如下：
& when (@media-common = true) {
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYAZ9hiJ-Ek-_EeA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}- 第 2 步：更改默认字体系列名称
- 将路径 vendor\magento\theme-frontend-luma\web\css\source\ 中名为 _variables.less 的文件复制到路径 app\design\frontend\panduola\mok\web\css\source\下面
- 我们更改变量 @font-family-name__base、@font-family__base 的值，更改后如下：
// Fonts
@font-family-name__base: ‘Inter’;
@font-family__base: @font-family-name__base, sans-serif;
//
- 我们需要正确导入字体系列名称
- 第3步 测试并查看结果，运行以下命令行：
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush