Add inter font

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

.gitattributes

@@ -3,3 +3,4 @@
 *.png filter=lfs diff=lfs merge=lfs -text
 *.gif filter=lfs diff=lfs merge=lfs -text
 *.ico filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -12,7 +12,3 @@ hugo.linux
 
 # Temporary lock file while building
 /.hugo_build.lock
-
-# Generated CSS/JS files
-**/*.min.css
-**/*.min.js

Makefile

@@ -1,10 +1,25 @@
-.PHONY: all css js reset-submodules
+.PHONY: all css js font update-inter reset-submodules
 
-all: css js reset-submodules
+all: css js font reset-submodules
 
 css:
 
 js:
 
+font:
+
+update-inter:
+	@tmp_zip=$$(mktemp) && \
+	tmp_dir=$$(mktemp -d) && \
+	curl -s https://api.github.com/repos/rsms/inter/releases/latest \
+	| grep "browser_download_url.*zip" \
+	| cut -d '"' -f 4 \
+	| xargs curl -Ls -o $$tmp_zip && \
+	unzip -q -o $$tmp_zip "web/*" -d $$tmp_dir && \
+	rm -rf static/font/inter && \
+	mkdir -p static/font/inter && \
+	cp -r $$tmp_dir/web/{InterVariable*.woff2,Inter-*.woff2} static/font/inter && \
+	rm -rf $$tmp_zip $$tmp_dir
+
 reset-submodules:
 	git submodule foreach --recursive 'git reset --hard'

assets/sass/fonts.scss

@@ -1,10 +1,179 @@
+@font-face {
+  font-family: InterVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/font/inter/InterVariable.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: InterVariable;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/font/inter/InterVariable-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("/font/inter/Inter-Thin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("/font/inter/Inter-ThinItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("/font/inter/Inter-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("/font/inter/Inter-ExtraLightItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/font/inter/Inter-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/font/inter/Inter-LightItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/font/inter/Inter-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/font/inter/Inter-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/font/inter/Inter-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/font/inter/Inter-MediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/font/inter/Inter-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/font/inter/Inter-SemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/font/inter/Inter-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/font/inter/Inter-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("/font/inter/Inter-ExtraBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("/font/inter/Inter-ExtraBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("/font/inter/Inter-Black.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("/font/inter/Inter-BlackItalic.woff2") format("woff2");
+}
+
 :root {
   --line-height: 1.5;
   --font-family:
-    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
+@supports (font-variation-settings: normal) {
+  :root {
+    font-family:
+      "InterVariable", system-ui, "Segoe UI", Roboto, Helvetica, Arial,
+      sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-optical-sizing: auto;
+  }
+}
+
 html {
   font-size: 100%;
   font-family: var(--font-family);

flake.nix

@@ -24,7 +24,12 @@
         treefmt = inputs.treefmt-nix.lib.evalModule pkgs ./treefmt.nix;
       in
       {
-        devShells.${system}.default = pkgs.mkShell { packages = with pkgs; [ hugo ]; };
+        devShells.${system}.default = pkgs.mkShell {
+          packages = with pkgs; [
+            hugo
+            unzip
+          ];
+        };
 
         formatter.${system} = treefmt.config.build.wrapper;
         checks.formatting.${system} = treefmt.config.build.check inputs.self;