Less不能直接@import加载Google Fonts，因其编译器不支持远程CSS解析；正确方式是在HTML的<head>中用<link rel="stylesheet">引入，并在Less中通过变量统一管理字体名。
Less里不能直接用@import加载Google Fonts
Less的@import语句默认只处理本地CSS/LESS文件，遇到https://fonts.googleapis.com/...这类远程URL时，会尝试下载并解析为Less语法——但Google Fonts返回的是纯CSS（含@font-face规则），不是合法Less代码，编译直接报错：ParseError: Unrecognised input或Unexpected token。
常见错误写法：
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
这不是浏览器限制，是Less编译器本身不支持远程CSS导入。即使加了inline或css flag，也仅跳过解析、原样输出，无法触发浏览器字体加载逻辑。
正确做法：把保留在HTML head里
Google Fonts本质是外部样式表，必须由浏览器原生加载，而不是Less预处理器参与。所有安全、可控的引入方式都绕不开HTML的<link>标签：
立即学习“前端免费学习笔记（深入）”；
-
rel="stylesheet"不可省略，否则浏览器不识别为CSS资源 -
&display=swap必须显式带上，避免FOIT（文字长时间空白） - URL中
&要写成&（HTML实体），否则解析失败 - 多个字体或字重用
&连接，不要拆成多个<link>
示例（放在<head>中）：
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
然后在Less/CSS中照常使用：font-family: 'Inter', sans-serif;。Less只管生成最终CSS，不干涉字体加载时机。
如果非要“集中管理”字体声明，用变量+注释代替
Less不支持动态注入外部字体，但可以模拟管理意图：
- 定义字体名变量，确保拼写统一：
@font-main: 'Inter'; - 在变量下方加注释说明来源和字重：
// Google Fonts: Inter wght@400;600, loaded via <link> in HTML - 避免在Less里重复写
@font-face——它会和Google Fonts返回的规则冲突，导致字体失效或回退
这样既保持代码可维护性，又不破坏字体加载链路。真正的加载行为永远发生在HTML层，这是浏览器渲染管线决定的，没法绕过。
Vue / React等框架项目里的注意事项
单页应用中容易误以为“把<link>写进组件模板就能自动注入”，但实际有坑：
- 服务端渲染（SSR）时，组件内
<link>可能不被提取到HTML head，导致首屏无字体 - 动态路由下，
<link>可能重复插入，触发多次字体请求 - 推荐统一在
public/index.html（Vue）或public/index.html（React）的<head>中静态声明
如果项目已用Webpack/Vite，也不建议通过插件自动注入——字体加载依赖网络和缓存策略，手动控制更可靠。复杂点在于：你没法让Less“接管”字体加载，只能接受它是个HTML基础设施问题。
