feat: Add local fontfaces

packages/rsbuild-config/src/lib/config/rsbuild.ts

@@ -20,12 +20,30 @@ import { pluginDts } from 'rsbuild-plugin-dts';
 export function defineServiceConfig(config: RsbuildConfig = {}): RsbuildConfig {
   return defineConfig({
     plugins: [pluginReact(), pluginTypeCheck()],
+    output: {
+      distPath: {
+        font: 'static/font',
+      },
+      filename: {
+        font: '[name][ext]',
+      },
+    },
     html: {
       template: './src/static/index.html',
       meta: {
         description: 'Thoughts and creations of mine',
       },
       tags: [
+        {
+          tag: 'link',
+          attrs: {
+            rel: 'preload',
+            as: 'font',
+            type: 'font/woff2',
+            href: '/static/font/lato-var.woff2',
+            crossorigin: true,
+          },
+        },
         {
           tag: 'style',
           children: `

packages/ui/src/static/styles.css

@@ -1,4 +1,77 @@
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Fira+Code:wght@300..700&display=swap');
+/* Lato (Static weights for exact rendering) */
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/lato-400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/lato-700.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/lato-400-italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/lato-700-italic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* EB Garamond (Full Variable) */
+@font-face {
+  font-family: 'EB Garamond';
+  src: url('./fonts/eb-garamond-var.woff2') format('woff2');
+  font-weight: 400 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'EB Garamond';
+  src: url('./fonts/eb-garamond-var-italic.woff2') format('woff2');
+  font-weight: 400 800;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Fira Code (Static weights for exact rendering) */
+@font-face {
+  font-family: 'Fira Code';
+  src: url('./fonts/fira-code-400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('./fonts/fira-code-500.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('./fonts/fira-code-700.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
 
 @import 'tailwindcss';
 @import 'tw-animate-css';