[PATCH v1 02/16] feat(fonts): add Google fonts

[Muhammad Rizki <kiizuha@gnuweeb.org>]

From: Kiizuha Kanazawa <kiizuha@gnuweeb.org>

Import Google Fonts using CSS `@import` and configure the font families
in `app.css` and `tailwind.config.ts`.

Signed-off-by: Kiizuha Kanazawa <kiizuha@gnuweeb.org>
---
 src/app.css        | 18 ++++++++++++++++++
 tailwind.config.ts |  9 ++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index b5c61c9..c6c01f0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,21 @@
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  html {
+    font-family:
+      Inter,
+      Rubik,
+      Geist,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      Apple Color Emoji,
+      Segoe UI Emoji,
+      Segoe UI Symbol,
+      Noto Color Emoji;
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 494061d..4cd2f8d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,12 +2,19 @@ import containerQueries from "@tailwindcss/container-queries";
 import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
+import defaultTheme from "tailwindcss/defaultTheme";
 
 export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
 
   theme: {
-    extend: {}
+    extend: {
+      fontFamily: {
+        inter: ["Inter", "Rubik", "Geist", ...defaultTheme.fontFamily.sans],
+        rubik: ["Rubik", "Inter", "Geist", ...defaultTheme.fontFamily.sans],
+        geist: ["Geist", "Inter", "Rubik", ...defaultTheme.fontFamily.sans]
+      }
+    }
   },
 
   plugins: [typography, forms, containerQueries]
-- 
Muhammad Rizki