如何在React.js应用中添加Gilroy字体？导入方法失效求助

以下是几种排查和解决方法：

• 确保@import在CSS文件最顶部
  @import规则必须放在CSS文件的最开头，不能在其他样式规则之后，否则会被忽略。示例：

  /* 全局CSS文件（如index.css）最顶部 */
  @import url('https://fonts.cdnfonts.com/css/gilroy-bold');
  
  /* 后续使用字体 */
  .your-class {
    font-family: 'Gilroy-Bold', sans-serif;
  }
  

• 确认全局CSS已正确引入
  如果是Create React App或类似脚手架，需确保包含@import的CSS文件在项目入口文件（如index.js）中导入，比如：

  import './index.css'; // 确保这个文件包含字体导入
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  

• 核对字体家族名称的准确性
  打开CDN链接，确认实际可用的字体家族名称（可能不是Gilroy-Bold，需以CDN提供的为准）。可以通过浏览器开发者工具的Network面板查看字体是否成功加载，或在Elements面板检查元素的font-family是否被正确应用。

• 替换为HTML link标签引入
  若@import始终不生效，直接在public/index.html的<head>中添加link标签，绕开CSS导入的优先级问题：

  <head>
    <!-- 其他标签 -->
    <link href="https://fonts.cdnfonts.com/css/gilroy-bold" rel="stylesheet">
  </head>
  

• 排查缓存与网络问题
  清除浏览器缓存，或用隐私模式打开页面，排除缓存影响；同时检查Network面板，确认字体请求返回200状态码，无404或权限错误。

• 检查CSS优先级冲突
  若字体样式被覆盖，用开发者工具查看元素的font-family是否被划掉。可通过更具体的选择器（如.parent .your-class）提升优先级，或临时添加!important测试（不推荐长期使用）：

  .your-class {
    font-family: 'Gilroy-Bold', sans-serif !important;
  }
  

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