diff --git a/assets/scss/fonts.scss b/assets/scss/fonts.scss
new file mode 100644
index 0000000..1061b86
--- /dev/null
+++ b/assets/scss/fonts.scss
@@ -0,0 +1,46 @@
+@mixin font-inconsolata($weight) {
+  @font-face {
+    font-family: 'Inconsolata';
+    font-display: swap;
+    font-weight: $weight;
+    src: local('Inconsolata'),
+         url('../fonts/Inconsolata-VariableFont_wdth,wght.ttf');
+  }
+}
+
+@mixin font-lora {
+  @font-face {
+    font-family: 'Lora';
+    font-display: swap;
+    src: local('Lora'),
+         url('../fonts/Lora-VariableFont_wght.ttf'),
+         url('../fonts/Lora-Italic-VariableFont_wght.ttf');
+  }
+}
+
+@mixin font-raleway($weight) {
+  @font-face {
+    font-family: 'Raleway';
+    font-display: swap;
+    font-weight: $weight;
+    src: local('Raleway'),
+         url('../fonts/Raleway-VariableFont_wght.ttf'),
+         url('../fonts/Raleway-Italic-VariableFont_wght.ttf');
+  }
+}
+
+@mixin font-stixgeneral {
+  @font-face {
+    font-family: 'STIXGeneral';
+    font-display: swap;
+    src: local('STIXGeneral-Regular'),
+         url('../fonts/STIXGeneral-Regular.ttf');
+  }
+}
+
+@include font-inconsolata(400);
+@include font-inconsolata(700);
+@include font-lora();
+@include font-raleway(400);
+@include font-raleway(700);
+@include font-stixgeneral();
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 2da949c..9c4cd9d 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -11,7 +11,7 @@ $standard-border: $standard-border-width solid $border-color;
 
 $font-heading: "Lora", serif;
 $font-body: "Raleway", serif;
-$font-code: "Inconsolata", monospace;
+$font-code: "Inconsolata", monospace, "STIXGeneral";
 
 $warning-background-color: #ffee99;
 $warning-border-color: #f5c827;
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 2f2ac16..2418d2f 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -15,7 +15,8 @@
 
     <!-- Fonts -->
     {{ if not (.Site.Params.noCss) }}
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Raleway:wght@400;700&family=Lora&display=block" media="screen">
+    {{ $fonts := resources.Get "scss/fonts.scss" | resources.ToCSS | resources.Minify }}
+    <link rel="stylesheet" href="{{ $fonts.Permalink }}" media="screen">
     {{ end }}
 
     <!-- External CSS (normalize and KaTeX -->
diff --git a/static/fonts/Inconsolata-VariableFont_wdth,wght.ttf b/static/fonts/Inconsolata-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..95ad718
Binary files /dev/null and b/static/fonts/Inconsolata-VariableFont_wdth,wght.ttf differ
diff --git a/static/fonts/Lora-Italic-VariableFont_wght.ttf b/static/fonts/Lora-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..05cbde2
Binary files /dev/null and b/static/fonts/Lora-Italic-VariableFont_wght.ttf differ
diff --git a/static/fonts/Lora-VariableFont_wght.ttf b/static/fonts/Lora-VariableFont_wght.ttf
new file mode 100644
index 0000000..b23ea94
Binary files /dev/null and b/static/fonts/Lora-VariableFont_wght.ttf differ
diff --git a/static/fonts/Raleway-Italic-VariableFont_wght.ttf b/static/fonts/Raleway-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..59d63b2
Binary files /dev/null and b/static/fonts/Raleway-Italic-VariableFont_wght.ttf differ
diff --git a/static/fonts/Raleway-VariableFont_wght.ttf b/static/fonts/Raleway-VariableFont_wght.ttf
new file mode 100644
index 0000000..33969e8
Binary files /dev/null and b/static/fonts/Raleway-VariableFont_wght.ttf differ
diff --git a/static/fonts/STIXGeneral-Regular.ttf b/static/fonts/STIXGeneral-Regular.ttf
new file mode 100644
index 0000000..521c6cd
Binary files /dev/null and b/static/fonts/STIXGeneral-Regular.ttf differ