ASP.NET Core部署后Google Fonts API失效问题求解

安全阿岳

2026-6-29

ASP.NET Core部署后Google Fonts不加载的解决办法

可能的原因及修复步骤

1. 排查托管环境的网络限制

部分托管服务商可能会屏蔽外部CDN请求，需确认服务器能否正常访问fonts.googleapis.com和fonts.gstatic.com。可以在服务器上通过curl命令或浏览器测试访问这两个域名，验证是否能返回内容。

2. 完善跨域资源加载配置

给样式表链接也添加crossorigin属性，避免浏览器拦截跨域字体资源，修改后的代码如下：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet" crossorigin>
<style type="text/css">
    body {
        font-family: "Cairo", sans-serif;
    }
</style>

3. 检查CSS优先级冲突

部署后可能存在第三方样式或其他CSS规则覆盖了body的字体设置。打开浏览器开发者工具（F12），查看body元素的计算样式，确认font-family是否被其他规则覆盖。
若存在冲突，可通过提升选择器权重解决，比如：

html body {
    font-family: "Cairo", sans-serif;
}

必要时可临时使用!important（优先调整选择器权重，尽量少用该属性）：

body {
    font-family: "Cairo", sans-serif !important;
}

4. 本地托管字体文件（备选方案）

如果托管环境无法访问Google CDN，可直接下载字体文件本地部署：

从Google Fonts下载Cairo字体所需字重的文件。
将字体文件放入项目wwwroot/fonts目录，在wwwroot/css中创建字体声明：

@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
/* 按需添加其他字重的声明 */
body {
    font-family: 'Cairo', sans-serif;
}