在React项目中，如何正确地导入和使用多个不同的字体文件？

在React项目中，导入和使用多个不同的字体文件通常涉及CSS和模块系统。以下是一个步骤指南：

1. **安装字体文件**：
- 将字体文件（如`.ttf`, `.otf`, 或 `.woff` 等）放在项目的 `public` 文件夹下，因为这是Web服务器默认访问的目录。也可以创建一个专门的 `fonts` 目录。

2. **创建CSS变量**：
使用CSS变量（`:local()` 功能）可以避免直接引用路径，保持样式简洁。例如，在 `src/assets/styles/global.css` 中：

   :root {
     --font-family-primary: url('/fonts/font1.ttf');
     --font-family-secondary: url('/fonts/font2.woff');
   }

3. **在组件中引用字体**：
在需要使用字体的地方，通过CSS变量获取路径：

   import { createGlobalStyle } from 'styled-components';
   
   const GlobalStyles = createGlobalStyle`
     body {
       font-family: var(--font-family-primary);
     }
     
     @media screen and (min-width: 768px) {
       /* 对大屏幕添加备用字体 */
       font-family: var(--font-family-primary), var(--font-family-secondary);
     }
   `;
   
   export default GlobalStyles;

4. **条件加载字体**：
如果某些字体只在特定设备或浏览器上使用，你可以使用JavaScript判断并加载：

   import FontFaceObserver from 'fontfaceobserver';

   const loadFonts = async () => {
     const observer = new FontFaceObserver('CustomFont', {
       weight: 400,
     });

     await observer.load();

     document.body.style.fontFamily = `CustomFont, Arial, sans-serif`;
   };

   useEffect(() => {
     loadFonts();
   }, []);