CSS设置Barlow与Fraunces字体无效仍显示Times New Roman问题

你当前的问题是用错了@import的URL——你用的是Google Fonts的字体展示页面链接，而非专门的字体CSS导入链接，浏览器无法从这个地址加载字体文件，所以 fallback 到了Times New Roman。

正确的实现步骤： #

1. 获取Google Fonts提供的官方导入链接：
   进入字体详情页后，选择需要的字重（比如常规、粗体），复制生成的@import代码（不是页面地址）。

2. 编写CSS代码时，记得加上通用字体作为备选，避免字体加载失败时显示系统默认字体：

/* 同时导入Barlow和Fraunces字体，可按需调整字重 */
@import url('https://fonts.googleapis.com/css2?family=Barlow&family=Fraunces:wght@400;700&display=swap');

/* 全局设置Barlow为默认字体 */
body {
    font-family: 'Barlow', sans-serif;
}

/* 给标题等元素设置Fraunces字体 */
h1, h2, .title {
    font-family: 'Fraunces', serif;
}

关键注意点： #

• 必须使用fonts.googleapis.com开头的CSS导入链接，而非fonts.google.com的页面链接
• 字体名称要和导入链接里的family参数完全一致（区分大小写）
• 添加sans-serif/serif这类通用字体作为 fallback，确保页面字体不会跳转到Times New Roman

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