diff --git a/_config.yml b/_config.yml
index 4aaff30..6d5ba33 100644
--- a/_config.yml
+++ b/_config.yml
@@ -112,6 +112,7 @@ defaults:
 xaymar:
   data:
     logo: '/assets/logo.svg'
+    fonts: '/assets/fonts.css'
     css: '/assets/site.css'
     js: '/assets/site.js'
     rss: '/feed.xml'
diff --git a/_includes/page_start.liquid b/_includes/page_start.liquid
index b478875..e500b62 100644
--- a/_includes/page_start.liquid
+++ b/_includes/page_start.liquid
@@ -49,5 +49,6 @@ Support for OpenGraph
 {% endif %}
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="icon" href="{{ site.xaymar.data.logo | absolute_url }}">
+		<link rel="stylesheet" href="{{ site.xaymar.data.fonts | absolute_url }}">
 		<link rel="stylesheet" href="{{ site.xaymar.data.css | absolute_url }}">
 		<link rel="alternate" type="application/atom+xml" title="All Articles" href="{{ site.xaymar.data.rss | absolute_url }}">
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 15a4d64..dd0881e 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -44,8 +44,6 @@ $theme-footer-background: hsl($theme-hue, 33%, 10.0%);
 $theme-footer-color: hsl($theme-hue, 0%, 80%);
 $theme-code-background: hsl($theme-hue, 50%, 5%);
 
-@import "_fonts.scss";
-
 * {
 	box-sizing: border-box;
 }
diff --git a/_sass/_fonts.scss b/_sass/_fonts.scss
deleted file mode 100644
index f6c2aa6..0000000
--- a/_sass/_fonts.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-@font-face {
-	src: url("assets/fonts/Oswald-VariableFont_wght.ttf") format("ttf");
-	font-family: "Oswald";
-	font-style: normal;
-}
-@font-face {
-	src: url("assets/fonts/Oswald-ExtraLight.ttf") format("ttf");
-	font-family: "Oswald";
-	font-style: normal;
-	font-weight: 200;
-}
-@font-face {
-	src: url("assets/fonts/Oswald-Light.ttf") format("ttf");
-	font-family: "Oswald";
-	font-style: normal;
-	font-weight: 300;
-}
-@font-face {
-	src: url("assets/fonts/Oswald-Regular.ttf") format("ttf");
-	font-family: "Oswald";
-	font-style: normal;
-	font-weight: 400;
-}
-@font-face {
-	src: url("assets/fonts/Oswald-Medium.ttf") format("ttf");
-	font-family: "Oswald";
-	font-style: normal;
-	font-weight: 500;
-}
-@font-face {
-	src: url("assets/fonts/Oswald-SemiBold.ttf") format("ttf");
-	font-family: "Oswald";
-	font-style: normal;
-	font-weight: 600;
-}
-@font-face {
-	src: url("assets/fonts/Oswald-Bold.ttf") format("ttf");
-	font-family: "Oswald";
-	font-style: normal;
-	font-weight: 700;
-}
-@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
-
-@font-face {
-	src: url("assets/fonts/Roboto-Thin.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: normal;
-	font-weight: 100;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-ThinItalic.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: oblique;
-	font-weight: 100;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-Light.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: normal;
-	font-weight: 300;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-LightOblique.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: oblique;
-	font-weight: 300;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-Regular.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: normal;
-	font-weight: 400;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-RegularItalic.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: oblique;
-	font-weight: 400;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-Medium.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: normal;
-	font-weight: 500;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-MediumItalic.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: oblique;
-	font-weight: 500;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-Bold.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: normal;
-	font-weight: 700;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-BoldItalic.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: oblique;
-	font-weight: 700;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-Black.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: normal;
-	font-weight: 900;
-}
-@font-face {
-	src: url("assets/fonts/Roboto-BlackItalic.ttf") format("ttf");
-	font-family: "Roboto";
-	font-style: oblique;
-	font-weight: 900;
-}
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
diff --git a/assets/fonts.scss b/assets/fonts.scss
new file mode 100644
index 0000000..6390a9c
--- /dev/null
+++ b/assets/fonts.scss
@@ -0,0 +1,83 @@
+---
+fonts:
+  - family: "Oswald"
+    styles:
+      - weight: "normal"
+        format: "ttf"
+        url: "assets/fonts/Oswald-VariableFont_wght.ttf"
+      - weight: 200
+        format: "ttf"
+        url: "assets/fonts/Oswald-ExtraLight.ttf"
+      - weight: 300
+        format: "ttf"
+        url: "assets/fonts/Oswald-Light.ttf"
+      - weight: 400
+        format: "ttf"
+        url: "assets/fonts/Oswald-Regular.ttf"
+      - weight: 500
+        format: "ttf"
+        url: "assets/fonts/Oswald-Medium.ttf"
+      - weight: 600
+        format: "ttf"
+        url: "assets/fonts/Oswald-SemiBold.ttf"
+      - weight: 700
+        format: "ttf"
+        url: "assets/fonts/Oswald-Bold.ttf"
+  - family: "Roboto"
+    styles:
+      - weight: 100
+        style: normal
+        format: "ttf"
+        url: "assets/fonts/Roboto-Thin.ttf"
+      - weight: 100
+        style: oblique
+        format: "ttf"
+        url: "assets/fonts/Roboto-ThinItalic.ttf"
+      - weight: 300
+        style: normal
+        format: "ttf"
+        url: "assets/fonts/Roboto-Light.ttf"
+      - weight: 300
+        style: oblique
+        format: "ttf"
+        url: "assets/fonts/Roboto-LightItalic.ttf"
+      - weight: 400
+        style: normal
+        format: "ttf"
+        url: "assets/fonts/Roboto-Regular.ttf"
+      - weight: 400
+        style: oblique
+        format: "ttf"
+        url: "assets/fonts/Roboto-RegularItalic.ttf"
+      - weight: 500
+        style: normal
+        format: "ttf"
+        url: "assets/fonts/Roboto-Medium.ttf"
+      - weight: 500
+        style: oblique
+        format: "ttf"
+        url: "assets/fonts/Roboto-MediumItalic.ttf"
+      - weight: 700
+        style: normal
+        format: "ttf"
+        url: "assets/fonts/Roboto-Bold.ttf"
+      - weight: 700
+        style: oblique
+        format: "ttf"
+        url: "assets/fonts/Roboto-BoldItalic.ttf"
+      - weight: 900
+        style: normal
+        format: "ttf"
+        url: "assets/fonts/Roboto-Black.ttf"
+      - weight: 900
+        style: oblique
+        format: "ttf"
+        url: "assets/fonts/Roboto-BlackItalic.ttf"
+---
+{% for font in page.fonts %}{% for style in font.styles %}@font-face {
+	font-family: "{{ font.family }}";{% if style.weight %}
+	font-weight: {{ style.weight }};{% endif %}{% if style.style %}
+	font-style: {{ style.style}};{% endif %}
+	src: url("{{ style.url | absolute_url }}") format("{{ style.format }}");
+}
+{% endfor %}{% endfor %}