如何在Laravel Breeze React中安装并使用Inter自定义字体

方法一：本地字体文件（修正路径与编译配置） #

1. 确认字体文件位置与Vite配置
   保持inter.ttf在resources/fonts/目录下，修改vite.config.js添加资源别名，确保Vite能正确识别资源路径：

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.jsx'],
               refresh: true,
           }),
           react(),
       ],
       resolve: {
           alias: {
               '@': '/resources',
           },
       },
   });
   

2. 修正CSS中的字体路径
   浏览器无法直接访问resources目录，需使用相对路径指向编译后的资源，同时添加字体加载优化：

   @font-face {
       font-family: 'Inter';
       src: url('../fonts/inter.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }
   
   html, body {
       font-family: 'Inter', sans-serif;
       margin: 0;
       padding: 0;
   }
   

3. 确保CSS被引入到React入口
   在resources/js/app.jsx顶部导入CSS文件：

   import '../css/app.css';
   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { BrowserRouter } from 'react-router-dom';
   import App from './App';
   
   ReactDOM.createRoot(document.getElementById('app')).render(
       <React.StrictMode>
           <BrowserRouter>
               <App />
           </BrowserRouter>
       </React.StrictMode>,
   );
   

4. 重新编译资源
   执行命令重新打包资源：

   npm run dev
   

方法二：使用npm安装Inter字体（更简便） #

1. 安装Inter字体包

   npm install @fontsource/inter
   

2. 在入口文件导入字体
   在app.jsx中直接导入所需字重的字体：

   // 导入400常规字重
   import '@fontsource/inter';
   // 如需700粗体，额外导入：
   // import '@fontsource/inter/700.css';
   

3. 全局设置字体
   在app.css中直接配置全局字体：

   html, body {
       font-family: 'Inter', sans-serif;
   }
   

内容的提问来源于stack exchange，提问作者Javier Aahmes Reansyah