Use serif font in main texts

Mystler · Dec 7, 2024 · 64602c6 · 64602c6
1 parent 42f9234
commit 64602c6
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 0 deletions.
diff --git a/src/lib/styles/base.css b/src/lib/styles/base.css
@@ -12,6 +12,16 @@ p {
   @apply mb-4 last:mb-0;
 }
 
+article p,
+article li {
+  @apply font-serif;
+  font-size: 20px;
+}
+
+article small {
+  @apply font-serif;
+}
+
 h1,
 h2,
 h3,

diff --git a/src/lib/styles/garamond-font.css b/src/lib/styles/garamond-font.css
@@ -0,0 +1,11 @@
+@font-face {
+  font-family: "EB Garamond";
+  font-style: normal;
+  src: url("/fonts/EBGaramond-VariableFont_wght.ttf");
+}
+
+@font-face {
+  font-family: "EB Garamond";
+  font-style: italic;
+  src: url("/fonts/EBGaramond-Italic-VariableFont_wght.ttf");
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import "@fortawesome/fontawesome-free/css/all.min.css";
   import "$lib/styles/noto-font.css";
+  import "$lib/styles/garamond-font.css";
   import "$lib/styles/base.css";
   import Header from "$lib/components/Header.svelte";
   import Sidebar from "$lib/components/Sidebar.svelte";

diff --git a/static/fonts/EBGaramond-Italic-VariableFont_wght.ttf b/static/fonts/EBGaramond-Italic-VariableFont_wght.ttf
diff --git a/static/fonts/EBGaramond-VariableFont_wght.ttf b/static/fonts/EBGaramond-VariableFont_wght.ttf
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -6,6 +6,7 @@ export default {
     extend: {},
     fontFamily: {
       sans: ["Noto Sans", "sans-serif"],
+      serif: ["EB Garamond", "serif"],
     },
   },
   plugins: [],