HubSpot双版本主题Montserrat字体渲染不一致问题求助

问题概述 #

我正在开发的HubSpot网站包含两个基于同一自定义主题的版本：V1用于旧页面，V2是做了文件大小优化的新版本（优化不影响字体渲染）。原使用Merriwether字体（加载300/500/700字重）时，两个版本渲染效果完全一致；替换为Montserrat字体后，出现以下异常：

• 初始加载300/500/700字重时，V1的300字重显示为100、700字重显示为500；V2存在类似异常。
• 修改为加载全字重后，V1仅能渲染100/400/700（700仍显示为500），V2能渲染100/300/400/500/600，均无法覆盖官方提供的全字重范围。
• 浏览器检查显示元素CSS完全一致，但渲染字体信息差异明显：V1显示Montserrat Thin，V2显示Montserrat Medium；指定具体字体名称（如"Montserrat Medium"）也无法解决问题，更换为link标签加载、移除字重参数等操作均无效。

排查与解决方案 #

1. 修正Google Fonts加载语法 #

原全字重加载代码存在语法错误：wght@0,100..900的写法不符合Google Fonts v2规范，会导致返回的CSS不包含预期字重，浏览器只能 fallback 到可用字重。

正确加载代码：

/* 加载所有字重及斜体版本 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* 或更简洁的写法 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&ital@0;1&display=swap');

若使用link标签：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&ital@0;1&display=swap">

2. 清除HubSpot与浏览器缓存 #

HubSpot的主题CSS可能存在CDN缓存，即使修改了加载代码，旧的字体配置仍可能生效：

• 在HubSpot后台进入主题编辑器，重新发布主题；或前往「设置>网站>域名和URL>缓存设置」清除CDN缓存。
• 使用浏览器隐身模式测试，或按Ctrl+Shift+R（Windows）/Cmd+Shift+R（Mac）强制刷新页面，清除本地缓存。

3. 检查HubSpot主题内置字体配置 #

HubSpot主题可能通过内置设置覆盖自定义CSS：

• 进入主题设置的「字体」选项，确认是否已配置Montserrat，且选中的字重包含300/500/700等需要的档位。
• 排查所有模块的局部CSS，确保没有额外的font-family或font-weight声明覆盖全局样式。

4. 验证字体加载状态 #

在浏览器开发者工具的「网络」标签中，查看Google Fonts返回的CSS文件，确认包含目标字重的@font-face规则，例如：

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url(...) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url(...) format('woff2');
}

若缺少对应字重的声明，说明加载语法仍有问题，需调整URL参数。

5. 确保CSS优先级 #

若自定义样式被HubSpot默认样式覆盖，可使用更具体的选择器，或临时添加!important（仅用于测试，不推荐长期使用）：

.billboard h1 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

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