使用font-face自定义字体线上失效求助：本地预览正常，线上默认Arial

1. 修复@font-face语法错误 #

你的代码遗漏了@符号，这是核心语法错误，会导致浏览器直接忽略自定义字体规则， fallback 到Arial。正确写法：

@font-face {
    font-family: BMgermar;
    src: url('http://example.com/css/BMgermar.TTF') format('truetype');
}

2. 检查文件路径与大小写匹配 #

• 确认线上服务器中BMgermar.TTF确实存放在css文件夹下，路径和代码完全一致。
• 若服务器是Linux系统，文件名区分大小写，必须保证代码中的BMgermar.TTF和实际文件名大小写完全匹配（比如不能是bmgermar.ttf或BMGermar.ttf）。

3. 补充多格式字体提升兼容性 #

仅提供TTF格式可能在部分老旧浏览器中失效，建议补充主流格式：

@font-face {
    font-family: BMgermar;
    src: url('BMgermar.eot'); /* IE9兼容 */
    src: url('BMgermar.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('BMgermar.woff2') format('woff2'), /* 现代浏览器 */
         url('BMgermar.woff') format('woff'), /* 现代浏览器 */
         url('BMgermar.TTF') format('truetype'), /* Safari/安卓/iOS */
         url('BMgermar.svg#BMgermar') format('svg'); /* 旧版iOS */
    font-weight: normal;
    font-style: normal;
}

记得把对应格式的字体文件同步上传到服务器css文件夹。

4. 确认字体引用规则 #

在需要使用该字体的元素上，显式设置font-family并将自定义字体放在首位：

body {
    font-family: BMgermar, Arial, sans-serif;
}

若未主动设置，浏览器不会自动启用自定义字体。

5. 配置服务器字体MIME类型 #

部分服务器默认未配置字体文件的MIME类型，导致浏览器无法正确加载。需在服务器配置中添加：

• Apache（.htaccess文件）：

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

• Nginx（配置文件）：

types {
    font/ttf ttf;
    font/woff woff;
    font/woff2 woff2;
    application/vnd.ms-fontobject eot;
    image/svg+xml svg;
}

6. 排查跨域加载问题 #

如果你的站点域名和字体文件域名（http://example.com）不一致，浏览器会因CORS策略拦截字体加载。解决方案：

• 将字体文件迁移到当前站点域名下；
• 在字体文件所在服务器配置CORS，允许你的站点域名访问。

内容的提问来源于stack exchange，提问作者Babur Shah Sayer