feat: add custom fonts

.eleventy.js

@@ -6,6 +6,11 @@ module.exports = (eleventyConfig) => {
     require("./config/template-languages/css-config.js"),
   );
 
+  // 	--------------------- Passthrough File Copy -----------------------
+  ["src/assets/fonts/"].forEach((path) =>
+    eleventyConfig.addPassthroughCopy(path),
+  );
+
   return {
     // Optional (default is set): If your site deploys to a subdirectory, change `pathPrefix`, for example with with GitHub pages
     pathPrefix: "/",

src/assets/css/global.css

@@ -1,4 +1,5 @@
 @import "global/reset.css";
+@import "global/fonts.css";
 
 @import "global/global-styles.css";
 

src/assets/css/global/fonts.css

@@ -0,0 +1,82 @@
+@supports not (font-variation-settings: normal) {
+  @font-face {
+    font-family: Quattro;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 450;
+    src:
+      local(""),
+      url("/assets/fonts/quattro/iAWriterQuattroS-Regular.woff2")
+        format("woff2");
+  }
+
+  @font-face {
+    font-family: Quattro;
+    font-style: bold;
+    font-display: swap;
+    font-weight: 650;
+    src:
+      local(""),
+      url("/assets/fonts/quattro/iAWriterQuattroS-Bold.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: Quattro;
+    font-style: italic;
+    font-display: swap;
+    font-weight: 450;
+    src:
+      local(""),
+      url("/assets/fonts/quattro/iAWriterQuattroS-Italic.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: Quattro;
+    font-style: italic;
+    font-display: swap;
+    font-weight: 650;
+    src:
+      local(""),
+      url("/assets/fonts/quattro/iAWriterQuattroS-BoldItalic.woff2")
+        format("woff2");
+  }
+
+  @font-face {
+    font-family: AnekLatin;
+    font-style: bold;
+    font-display: swap;
+    font-weight: 700;
+    src:
+      local(""),
+      url("/assets/fonts/aneklatin/AnekLatin-Bold.ttf") format("truetype");
+  }
+
+  @font-face {
+    font-family: AnekLatin;
+    font-style: bold;
+    font-display: swap;
+    font-weight: 800;
+    src:
+      local(""),
+      url("/assets/fonts/aneklatin/AnekLatin-ExtraBold.ttf") format("truetype");
+  }
+}
+
+@supports (font-variation-settings: normal) {
+  @font-face {
+    font-family: Quattro;
+    src: url("/assets/fonts/quattro/iAWriterQuattroV.ttf") format("truetype");
+    font-weight: 450 600;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: AnekLatin;
+    src: url("/assets/fonts/aneklatin/AnekLatin-VariableFont_wdth,wght.ttf")
+      format("truetype");
+    font-weight: 700 800;
+    font-style: normal;
+    font-display: swap;
+  }
+}

src/assets/css/global/global-styles.css

@@ -4,3 +4,41 @@
   Low-specificity, global styles that apply to the whole
   project: https://cube.fyi/css.html
 */
+body {
+  font-family:
+    Quattro,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    "system-ui",
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+}
+
+h1 {
+  font-family: AnekLatin;
+  font-weight: 800;
+}
+
+h2,
+h3 {
+  font-family: AnekLatin;
+  font-weight: 700;
+}
+
+h3 {
+  text-transform: uppercase;
+}
+
+a {
+  text-decoration-color: black;
+  text-decoration-thickness: 2px;
+}

src/assets/css/utils/flow.css

@@ -0,0 +1,8 @@
+/*
+FLOW UTILITY
+Like the Every Layout stack: https://every-layout.dev/layouts/stack/
+Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
+*/
+.flow > * + * {
+  margin-block-start: var(--flow-space, 1em);
+}

src/pages/index.md

@@ -6,3 +6,15 @@ permalink: /index.html
 # Hello from index
 
 This is the root page.
+
+**This is bold text.**
+
+_This is italic text._
+
+_**This is bold and italic text.**_
+
+## Subheading
+
+### Subsubheading
+
+Here is [a link](https://wonderfulfrog.com)