如何在Qwik应用中使用Google Font并实现全局引用？

方法一：通过global.css导入并全局配置 #

1. 正确导入字体
   把Google Font提供的@import语句放在global.css的最顶部（确保优先级最高），比如：

   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
   

2. 灵活引用字体

   • 若想让整个项目默认使用该字体，直接在global.css中给全局元素设置font-family：

     * {
       font-family: 'Roboto', sans-serif;
     }
     

   • 若需要在不同组件中灵活调用，可定义CSS变量：

     :root {
       --main-font: 'Roboto', sans-serif;
     }
     

     之后在任意CSS文件里直接调用变量即可：

     .card-title {
       font-family: var(--main-font);
     }
     

方法二：通过根布局组件引入 #

Qwik的根布局组件（通常是src/routes/layout.tsx）会在所有页面渲染，你可以在这里通过<link>标签引入字体，效果和传统index.html引入一致：

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <div>
      <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />
      </head>
      <slot />
    </div>
  );
});

注意事项 #

• 导入字体时，务必保证字体名称和Google Font提供的完全一致（比如带空格的字体名'Open Sans'要加引号）
• 若字体不生效，检查浏览器控制台是否有资源加载报错，排查URL是否正确
• 优先使用官方提供的@import或<link>链接，避免本地字体文件的额外维护成本

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