diff --git a/package-lock.json b/package-lock.json
index d72cc3b..cc9d4a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "geo-milev-site",
       "version": "0.0.1",
       "dependencies": {
+        "@fontsource-variable/roboto-flex": "^5.0.8",
+        "@fontsource/alegreya": "^5.0.8",
+        "@fontsource/roboto": "^5.0.8",
         "@urql/svelte": "^4.0.1",
         "expr-eval": "^2.0.2",
         "fuse.js": "^6.6.2",
@@ -456,6 +459,21 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource-variable/roboto-flex": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto-flex/-/roboto-flex-5.0.8.tgz",
+      "integrity": "sha512-zSnE0htmk1tlKqVNfMGWJfxgLxLYQH9eYNvXFzWJ3GuDMXVBEiKuaYytkrItaP/svX3t5y8qsIXC+cpflsfvWQ=="
+    },
+    "node_modules/@fontsource/alegreya": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/alegreya/-/alegreya-5.0.8.tgz",
+      "integrity": "sha512-f9B9ni40u2KKs6xmMWrcB3uDhQvoxkUl7DCRoYMPwhaVtBbmAt8dOIJ8+ETUtCRcAbDp4VGVJ7yNK+ubGItfuw=="
+    },
+    "node_modules/@fontsource/roboto": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.8.tgz",
+      "integrity": "sha512-XxPltXs5R31D6UZeLIV1td3wTXU3jzd3f2DLsXI8tytMGBkIsGcc9sIyiupRtA8y73HAhuSCeweOoBqf6DbWCA=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
diff --git a/package.json b/package.json
index fb4dad4..97eee98 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,9 @@
   },
   "type": "module",
   "dependencies": {
+    "@fontsource-variable/roboto-flex": "^5.0.8",
+    "@fontsource/alegreya": "^5.0.8",
+    "@fontsource/roboto": "^5.0.8",
     "@urql/svelte": "^4.0.1",
     "expr-eval": "^2.0.2",
     "fuse.js": "^6.6.2",
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 351f90d..ac7f79e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -27,10 +27,19 @@
 
 	export let data;
 
-	let loaded = false;
-
 	onMount(() => {
-		loaded = true
+		import('@fontsource/roboto/100.css');
+		import('@fontsource/roboto/300.css');
+		import('@fontsource/roboto/400.css');
+		import('@fontsource/roboto/500.css');
+		import('@fontsource/roboto/100-italic.css');
+		import('@fontsource/roboto/300-italic.css');
+		import('@fontsource/roboto/400-italic.css');
+		import('@fontsource/roboto/500-italic.css');
+		import('@fontsource-variable/roboto-flex/opsz.css');
+		import('@fontsource/alegreya/400.css');
+		import('@fontsource/alegreya/500.css');
+		import('@fontsource/alegreya/700.css');
 	})
 
   seoInfo.set({
@@ -70,22 +79,6 @@
 </script>
 
 <svelte:head>
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	{#if loaded}
-		<link
-			href="https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;700&display=swap"
-			rel="stylesheet"
-		/>
-		<link
-			href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,GRAD@8..144,400,45;8..144,400,50;8..144,1000,0&display=swap"
-			rel="stylesheet"
-		/>
-		<link
-			href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap"
-			rel="stylesheet"
-		/>
-	{/if}
 	{#each data.MainInfo.favicons as favicon}
 		<link rel="icon" type="image/png" sizes="{favicon.size}"
 			  href={env.PUBLIC_SERVER_URL + favicon.favicon.url} />