双语网站仅单语言加载本地Google Fonts问题求助

网站基础信息 #

• 德语版本路径：website/index.html
• 英语版本路径：website/english/index.html
• 本地字体文件存放路径：website/assets/fonts，用于加载Google Fonts
• 德语版本字体加载正常，英语版本无法加载字体
• 主CSS文件路径：
  • 德语版：website/assets/mbr/mbr-additional.css
  • 英语版：website/english/assets/mbr/mbr-additional.css
• 两个版本的index.html加载CSS的代码一致：

<link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">

字体导入配置 #

• 通过tangerine.css导入@font-face规则，字体文件与tangerine.css位于同一目录
• 导入代码：

@import url(https://websitename/assets/fonts/tangerine.css);

• tangerine.css中的@font-face示例（仅展示IE9兼容配置）：

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/tangerine-v17-latin-regular.eot'); /* IE9 Compat Modes */
}

已尝试的无效解决方案 #

• 在英语版mbr-additional.css中添加相同的字体导入代码后，网站整体切换为默认字体，且原有样式失效
• 重命名字体文件
• 在英语版本目录下复制完整fonts文件夹，并修改@import路径
• 修改字体文件路径为url('../../fonts/tangerine-v17-latin-regular.eot')，尝试调用根目录下的字体文件

编辑补充信息 #

编辑1：CORS错误提示 #

开发者工具显示CORS禁止加载字体，当前.htaccess配置如下：

<IfModule mod_headers.c>
        <FilesMatch "\.(eot|otf|ttc|ttf|woff|woff2)$">
                Header set Access-Control-Allow-Origin "*"
        </FilesMatch>
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine on
</IfModule>

# Require all granted
Satisfy Any
Order Deny,Allow
Allow from all

<FilesMatch "^\.">
    # Require all denied
    Order Allow,Deny
    Deny from all
</FilesMatch>

已添加CORS允许规则，但字体请求仍被拒绝。

编辑2：补充MIME类型配置 #

在.htaccess中添加了字体文件对应的MIME类型：

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff
AddType application/font-woff2           .woff2

编辑3：完整CSS文件内容 #

mbr-additional.css内容：

@import url(websitename/assets/fonts/roboto.css);
@import url(websitename/assets/fonts/roboto-condensed.css);
@import url(websitename/assets/fonts/tangerine.css);
@import url(websitename/assets/fonts/titillium.css);


body {
  font-style: normal;
  line-height: 1.5;
}
*and more css*

Roboto字体定义文件（路径https://websitename/assets/fonts/roboto.css）内容：

/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}

首页index.html调用CSS的代码：

<link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">

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