为何导入的三款Google Fonts仅一款加载成功？

我帮你排查出两个核心问题，解决后应该就能正常加载所有字体了：

1. 修复@import语句的HTML实体错误 #

你当前的导入语句里用了&（HTML转义字符），但在CSS文件中不需要这种转义，浏览器会把它当成普通字符，导致后面的字体参数无法被正确识别，最终只有第一个ABeeZee被加载。

把导入语句改成这样：

@import url('https://fonts.googleapis.com/css2?family=ABeeZee&family=DM+Serif+Display&family=Prompt:wght@300;500&display=swap');

这里我还额外添加了300权重到Prompt的参数里——因为你的h2样式用了font-weight: 300，但之前只导入了500权重的Prompt，即使导入正常，300权重的字体文件也不存在，还是会回退到默认字体。

2. 确认字体权重与导入的匹配 #

• 对于DM Serif Display：这款字体默认只有400权重（常规字重），你导航栏的样式里没有指定额外权重，所以只要导入语句正确，就能正常加载。
• 对于Prompt：现在我们同时导入了300和500权重，你的h2用300、其他需要500权重的地方也能正常使用了。

验证方法 #

打开浏览器开发者工具的「Network」面板，过滤「Fonts」类别，刷新页面后如果能看到DM Serif Display和Prompt的字体文件请求，就说明加载成功了。

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