diff --git a/src/_includes/simple_page.njk b/src/_includes/simple_page.njk
index 320637d..44f3000 100644
--- a/src/_includes/simple_page.njk
+++ b/src/_includes/simple_page.njk
@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/favicon.ico">
     <title>{% if title %} {{ title }} - {% endif %}sofi web</title>
+    <link rel="stylesheet" href="/css/fonts.css" type="text/css">
     <link rel="stylesheet" href="/css/app.css" type="text/css">
     <link rel="stylesheet" href="/css/navbar.css" type="text/css">
     <link rel="stylesheet" href="/css/comments.css" type="text/css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;1,300&family=Rubik:ital,wght@0,400;0,500;1,400;1,500&display=swap" type="text/css">
     {% if load_comments_script %}
         <script src="/scripts/dompurify.js"></script>
     {% endif %}
diff --git a/static/css/fonts.css b/static/css/fonts.css
new file mode 100644
index 0000000..0b69ef2
--- /dev/null
+++ b/static/css/fonts.css
@@ -0,0 +1,27 @@
+@font-face {
+    font-family: "JetBrains Mono";
+    src: url("https://cdn.sofiaritz.com/fonts/ofl/jetbrainsmono/JetBrainsMono-Italic[wght].ttf");
+    font-style: italic;
+    font-weight: 300;
+}
+
+@font-face {
+    font-family: "JetBrains Mono";
+    src: url("https://cdn.sofiaritz.com/fonts/ofl/jetbrainsmono/JetBrainsMono[wght].ttf");
+    font-style: normal;
+    font-weight: 300;
+}
+
+@font-face {
+    font-family: "Rubik";
+    src: url("https://cdn.sofiaritz.com/fonts/ofl/rubik/Rubik[wght].ttf");
+    font-style: normal;
+    font-weight: 400 500;
+}
+
+@font-face {
+    font-family: "Rubik";
+    src: url("https://cdn.sofiaritz.com/fonts/ofl/rubik/Rubik-Italic[wght].ttf");
+    font-style: italic;
+    font-weight: 400 500;
+}