diff --git a/.gitignore b/.gitignore
index 1ae3f7a..4a8f84b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,6 @@ node_modules
# generated files
dist
-src/_includes/css
src/_includes/scripts
# cache
diff --git a/config/filters/index.js b/config/filters/index.js
new file mode 100644
index 0000000..4207a9e
--- /dev/null
+++ b/config/filters/index.js
@@ -0,0 +1,17 @@
+const postcss = require("postcss");
+const cssnano = require("cssnano");
+
+const values = Object.values;
+const entries = Object.entries;
+
+const minifyCss = async (css) => {
+ const output = await postcss([cssnano]).process(css);
+
+ return output.css;
+};
+
+module.exports = {
+ entries,
+ values,
+ minifyCss,
+};
diff --git a/eleventy.config.js b/eleventy.config.js
index e389d03..faf9c92 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,3 +1,4 @@
+const { entries, values, minifyCss } = require("./config/filters/index.js");
const markdown = require("./config/plugins/markdown.js");
const imageShortcode = require("./config/shortcodes/image.js");
@@ -8,6 +9,11 @@ module.exports = (eleventyConfig) => {
require("./config/template-languages/css-config.js"),
);
+ // --------------------- Custom Filters -----------------------
+ eleventyConfig.addFilter("minifyCss", minifyCss);
+ eleventyConfig.addFilter("entries", entries);
+ eleventyConfig.addFilter("values", values);
+
// --------------------- Passthrough File Copy -----------------------
["src/assets/fonts/"].forEach((path) =>
eleventyConfig.addPassthroughCopy(path),
@@ -28,6 +34,7 @@ module.exports = (eleventyConfig) => {
dir: {
output: "dist",
input: "src",
+ data: "data",
includes: "_includes",
layouts: "_layouts",
},
diff --git a/src/_includes/css/fontFace.njk b/src/_includes/css/fontFace.njk
new file mode 100644
index 0000000..d88bb36
--- /dev/null
+++ b/src/_includes/css/fontFace.njk
@@ -0,0 +1,19 @@
+{% set allFonts = fonts | values %}
+{% for font in allFonts %}
+ {% set weights = font.weights | values %}
+ {% for fontEntry in weights %}
+ {% if fontEntry.url %}
+ {% set family = font.family %}
+ {% set localName = font.family %}
+ {% set postScriptName = [font.family, fontEntry.variant] | join("-") | replace(" ", "") %}
+ @font-face {
+ font-family: {{ family }};
+ font-style: {{ fontEntry.style }};
+ font-weight: {{ fontEntry.weight }};
+ {% if fontEntry.display %}font-display: {{ fontEntry.display }};{% endif %}
+ src: local("{{ localName }}"), local("{{ postScriptName }}"), url("{{ fontEntry.url }}") format("{{ fontEntry.format }}")
+ }
+ {% endif %}
+ {% endfor %}
+{% endfor %}
+
diff --git a/src/_includes/css/fontVariables.njk b/src/_includes/css/fontVariables.njk
new file mode 100644
index 0000000..d6868ef
--- /dev/null
+++ b/src/_includes/css/fontVariables.njk
@@ -0,0 +1,19 @@
+{% set allFonts = fonts | entries %}
+
+html {
+{% for font in allFonts %}
+ {% set fontType = font | first %}
+ {% set fontConfig = font | last %}
+ {% set fallbackFonts = fontConfig.fallbacks | join(", ") %}
+ --font-family-{{ fontType }}: {{ fontConfig.family }}, {{ fallbackFonts }};
+ {% set weights = fontConfig.weights | entries %}
+ {% for weight in weights %}
+ {% set weightName = weight | first %}
+ {% set weightConfig = weight | last %}
+ {% if weightConfig.style != "italic" %}
+ --font-weight-{{ fontType }}-{{ weightName | lower }}: {{ weightConfig.weight }};
+ {% endif %}
+ {% endfor %}
+{% endfor %}
+}
+
diff --git a/src/_layouts/base.html b/src/_layouts/base.html
index 582f794..0476eae 100644
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -7,6 +7,23 @@
+ {% for preload in preloads %}
+
+ {% endfor %} {% set fontCss %} {% include "css/fontFace.njk" %} {% include
+ "css/fontVariables.njk" %}{% endset %}
+
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index 7333a2d..64184ae 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -1,5 +1,5 @@
@import "global/reset.css";
-@import "global/fonts.css";
+/* @import "global/fonts.css"; */
@import "global/variables.css";
@import "global/global-styles.css";
diff --git a/src/assets/css/global/global-styles.css b/src/assets/css/global/global-styles.css
index 14cc22d..9f6b1ae 100644
--- a/src/assets/css/global/global-styles.css
+++ b/src/assets/css/global/global-styles.css
@@ -12,11 +12,11 @@ body {
accent-color: var(--color-primary);
background-color: var(--color-bg);
color: var(--color-text);
- font-family: var(--font-body), var(--font-fallback);
- font-size: var(--font-size-body);
- font-weight: var(--font-weight-body);
- letter-spacing: var(--font-tracking-body);
- line-height: var(--font-line-height-body);
+ font-family: var(--font-family-body);
+ font-size: 1.125rem;
+ font-weight: var(--font-weight-body-regular);
+ letter-spacing: -0.03rem;
+ line-height: 1.5rem;
}
h1,
@@ -25,25 +25,28 @@ h3,
h4,
h5,
h6 {
- font-family: var(--font-display);
+ font-family: var(--font-family-display);
}
h1 {
- font-size: var(--font-size-heading-1);
- font-weight: var(--font-weight-heading-1);
- letter-spacing: var(--font-tracking-heading-1);
+ font-size: 3rem;
+ font-weight: var(--font-weight-display-extrabold);
+ letter-spacing: -0.05rem;
+ line-height: 3rem;
}
h2 {
- font-size: var(--font-size-heading-2);
- font-weight: var(--font-weight-heading-2);
- letter-spacing: var(--font-tracking-heading-2);
+ font-size: 2rem;
+ font-weight: var(--font-weight-display-bold);
+ letter-spacing: -0.05rem;
+ line-height: 2rem;
}
h3 {
- font-size: var(--font-size-heading-3);
- font-weight: var(--font-weight-heading-3);
- letter-spacing: var(--font-tracking-heading-3);
+ font-size: 1.125rem;
+ font-weight: var(--font-weight-display-bold);
+ letter-spacing: -0.05rem;
+ line-height: 1.125rem;
text-transform: uppercase;
}
diff --git a/src/assets/css/global/variables.css b/src/assets/css/global/variables.css
index 9c4a1ec..704349c 100644
--- a/src/assets/css/global/variables.css
+++ b/src/assets/css/global/variables.css
@@ -25,32 +25,6 @@
--color-primary-subtle: var(--color-indiglo-500);
--color-primary-faded: var(--color-indiglo-600);
--color-secondary: #ed5215;
-
- --font-display: AnekLatin;
- --font-body: Quattro;
- --font-fallback: 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";
-
- --font-size-heading-1: 3rem;
- --font-size-heading-2: 2rem;
- --font-size-heading-3: 1.5rem;
- --font-size-body: 1.125rem;
-
- --font-weight-heading-1: 800;
- --font-weight-heading-2: 700;
- --font-weight-heading-3: 700;
- --font-weight-body: 450;
-
- --font-tracking-heading-1: -5%;
- --font-tracking-heading-2: -5%;
- --font-tracking-heading-3: -5%;
- --font-tracking-body: -3%;
-
- --font-line-height-heading-1: 3rem;
- --font-line-height-heading-2: 2rem;
- --font-line-height-heading-3: 1.5rem;
- --font-line-height-body: 2rem;
}
@media (prefers-color-scheme: dark) {
diff --git a/src/assets/fonts/aneklatin/AnekLatin-VariableFont_wdth,wght.ttf b/src/assets/fonts/aneklatin/AnekLatin-VariableFont_wdth,wght.ttf
deleted file mode 100644
index c8d912e..0000000
Binary files a/src/assets/fonts/aneklatin/AnekLatin-VariableFont_wdth,wght.ttf and /dev/null differ
diff --git a/src/assets/fonts/quattro/iAWriterQuattroV.ttf b/src/assets/fonts/quattro/iAWriterQuattroV.ttf
deleted file mode 100644
index 6d50c14..0000000
Binary files a/src/assets/fonts/quattro/iAWriterQuattroV.ttf and /dev/null differ
diff --git a/src/data/fonts.js b/src/data/fonts.js
new file mode 100644
index 0000000..86b1ed2
--- /dev/null
+++ b/src/data/fonts.js
@@ -0,0 +1,102 @@
+/**
+ * This approach for managing Web Fonts was derived from
+ * Aleksandr Hovhannisyan.
+ * See more here: https://www.aleksandrhovhannisyan.com/blog/configuring-web-fonts-in-11ty-with-global-data/
+ */
+
+const path = require("path");
+
+const FONT_STYLE = {
+ NORMAL: "normal",
+ ITALIC: "italic",
+};
+
+const FONT_DISPLAY = {
+ SWAP: "swap",
+};
+
+const FONT_VARIANT = {
+ BOLD: "Bold",
+ EXTRA_BOLD: "ExtraBold",
+ ITALIC: "Italic",
+ BOLD_ITALIC: "BoldItalic",
+ REGULAR: "Regular",
+};
+
+const getFontUrl = (src) => path.join("/assets/fonts", src);
+
+const fallbacks = [
+ "-apple-system",
+ "BlinkMacSystemFont",
+ "Segoe UI",
+ "Roboto",
+ "Ubuntu",
+ "Open Sans",
+ "Helvetica Neue",
+ "sans-serif",
+];
+
+const fonts = {
+ display: {
+ family: "Anek Latin",
+ fallbacks,
+ weights: {
+ extraBold: {
+ display: FONT_DISPLAY.SWAP,
+ format: "truetype",
+ style: FONT_STYLE.NORMAL,
+ url: getFontUrl("/aneklatin/AnekLatin-ExtraBold.ttf"),
+ variant: FONT_VARIANT.EXTRA_BOLD,
+ weight: 800,
+ },
+ bold: {
+ display: FONT_DISPLAY.SWAP,
+ format: "truetype",
+ style: FONT_STYLE.NORMAL,
+ url: getFontUrl("/aneklatin/AnekLatin-Bold.ttf"),
+ variant: FONT_VARIANT.BOLD,
+ weight: 700,
+ },
+ },
+ },
+ body: {
+ family: "iA Writer Quattro V",
+ fallbacks,
+ weights: {
+ regular: {
+ display: FONT_DISPLAY.SWAP,
+ format: "woff2",
+ style: FONT_STYLE.NORMAL,
+ url: getFontUrl("/quattro/iAWriterQuattroS-Regular.woff2"),
+ variant: FONT_VARIANT.REGULAR,
+ weight: 400,
+ },
+ italtic: {
+ display: FONT_DISPLAY.SWAP,
+ format: "woff2",
+ style: FONT_STYLE.ITALIC,
+ url: getFontUrl("/quattro/iAWriterQuattroS-Italic.woff2"),
+ variant: FONT_VARIANT.ITALIC,
+ weight: 400,
+ },
+ bold: {
+ display: FONT_DISPLAY.SWAP,
+ format: "woff2",
+ style: FONT_STYLE.NORMAL,
+ url: getFontUrl("/quattro/iAWriterQuattroS-Bold.woff2"),
+ variant: FONT_VARIANT.BOLD,
+ weight: 650,
+ },
+ boldItalic: {
+ display: FONT_DISPLAY.SWAP,
+ format: "woff2",
+ style: FONT_STYLE.ITALIC,
+ url: getFontUrl("/quattro/iAWriterQuattroS-BoldItalic.woff2"),
+ variant: FONT_VARIANT.BOLD_ITALIC,
+ weight: 650,
+ },
+ },
+ },
+};
+
+module.exports = fonts;
diff --git a/src/data/preloads.js b/src/data/preloads.js
new file mode 100644
index 0000000..a3e154f
--- /dev/null
+++ b/src/data/preloads.js
@@ -0,0 +1,21 @@
+const fonts = require("./fonts");
+
+const preloads = [
+ {
+ as: "font",
+ href: fonts.display.weights.extraBold.url,
+ crossorigin: true,
+ },
+ {
+ as: "font",
+ href: fonts.display.weights.bold.url,
+ crossorigin: true,
+ },
+ {
+ as: "font",
+ href: fonts.body.weights.regular.url,
+ crossorigin: true,
+ },
+];
+
+module.exports = preloads;
diff --git a/src/pages/index.md b/src/pages/index.md
index f89b347..147b3f5 100644
--- a/src/pages/index.md
+++ b/src/pages/index.md
@@ -7,6 +7,8 @@ permalink: /index.html
This is the root page.
+This is regular text.
+
**This is bold text.**
_This is italic text._