Google Web Font Droid Arabic Kufi在Safari浏览器不生效原因咨询

问题原因 #

• 混合内容拦截：你当前使用的是http协议的字体导入地址，如果你的Web站点本身是HTTPS协议，Safari的安全策略会默认拦截这种HTTP非安全资源的加载，Chrome、Firefox等浏览器会自动将这类公开静态资源的HTTP请求升级为HTTPS，所以不会出现加载失败的问题。
• 字体格式兼容性差异：Google早期访问（Early Access）字库会根据浏览器UA返回对应格式的字体文件，部分版本的Safari对Droid Arabic Kufi字体默认返回的WOFF2格式兼容性不佳，且不会自动降级加载其他兼容格式，导致字体识别失败。
• 跨域资源校验严格：Safari对跨域字体资源的CORS校验规则比其他浏览器更严格，如果你的站点配置了内容安全策略（CSP）但未放行Google字体相关域名，也会优先触发Safari的拦截规则。
• 智能跟踪预防拦截：开启了智能预防跟踪（ITP）功能的Safari版本，会限制第三方域名的静态资源缓存与加载，Google字体作为第三方资源也可能被规则拦截。

修复方案 #

• 第一步：将字体导入地址的协议替换为HTTPS，修改后的导入代码如下：

@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

• 第二步：如果修改协议后仍不生效，可以将字体文件下载到本地服务器托管，自行编写@font-face规则，依次声明eot、woff、woff2、ttf、svg等全格式字体文件，适配不同版本的Safari。
• 第三步：如果站点配置了CSP规则，添加fonts.googleapis.com、fonts.gstatic.com到字体资源的允许域名列表中。

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