diff --git a/static/skin/index.css b/static/skin/index.css
index 407fb7746..c7dbb78c9 100644
--- a/static/skin/index.css
+++ b/static/skin/index.css
@@ -517,3 +517,13 @@ body {
         grid-template-columns: 1fr;
     }
 }
+
+@font-face {
+  font-family: "poppins";
+  src: url("../skin/fonts/Poppins.ttf?KIWIXCACHEID") format("truetype");
+}
+
+@font-face {
+  font-family: "roboto";
+  src: url("../skin/fonts/Roboto.ttf?KIWIXCACHEID") format("truetype");
+}
diff --git a/static/templates/index.html b/static/templates/index.html
index ec887ab55..570d78ac5 100644
--- a/static/templates/index.html
+++ b/static/templates/index.html
@@ -26,17 +26,6 @@
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="msapplication-config" content="{{root}}/skin/favicon/browserconfig.xml?KIWIXCACHEID">
     <meta name="theme-color" content="#ffffff">
-    <style>
-      @font-face {
-        font-family: "poppins";
-        src: url("{{root}}/skin/fonts/Poppins.ttf?KIWIXCACHEID") format("truetype");
-      }
-
-      @font-face {
-          font-family: "roboto";
-          src: url("{{root}}/skin/fonts/Roboto.ttf?KIWIXCACHEID") format("truetype");
-      }
-    </style>
     <script type="text/javascript" src="./viewer_settings.js"></script>
     <script type="module" src="{{root}}/skin/i18n.js?KIWIXCACHEID" defer></script>
     <script type="text/javascript" src="{{root}}/skin/languages.js?KIWIXCACHEID" defer></script>
diff --git a/test/library_server.cpp b/test/library_server.cpp
index c9c34e367..4b0019952 100644
--- a/test/library_server.cpp
+++ b/test/library_server.cpp
@@ -1028,7 +1028,7 @@ TEST_F(LibraryServerTest, no_name_mapper_catalog_v2_individual_entry_access)
   "    <title>Welcome to Kiwix Server</title>\n" \
   "    <link\n" \
   "      type=\"text/css\"\n" \
-  "      href=\"/ROOT%23%3F/skin/index.css?cacheid=e4d76d16\"\n" \
+  "      href=\"/ROOT%23%3F/skin/index.css?cacheid=2446b723\"\n" \
   "      rel=\"Stylesheet\"\n" \
   "    />\n" \
   "    <link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3\">\n" \
diff --git a/test/server.cpp b/test/server.cpp
index cc42c4ae6..44c62801e 100644
--- a/test/server.cpp
+++ b/test/server.cpp
@@ -61,7 +61,7 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=6a8c6fb2" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=e4d76d16" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=2446b723" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=ce19da2a" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" },
@@ -274,7 +274,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
   const std::vector<UrlAndExpectedResult> testData{
     {
       /* url */ "/ROOT%23%3F/",
-R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=e4d76d16"
+R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=2446b723"
     <link rel="apple-touch-icon" sizes="180x180" href="/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3">
     <link rel="icon" type="image/png" sizes="32x32" href="/ROOT%23%3F/skin/favicon/favicon-32x32.png?cacheid=79ded625">
     <link rel="icon" type="image/png" sizes="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc">
@@ -282,8 +282,6 @@ R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=e4d76d16"
     <link rel="mask-icon" href="/ROOT%23%3F/skin/favicon/safari-pinned-tab.svg?cacheid=8d487e95" color="#5bbad5">
     <link rel="shortcut icon" href="/ROOT%23%3F/skin/favicon/favicon.ico?cacheid=92663314">
     <meta name="msapplication-config" content="/ROOT%23%3F/skin/favicon/browserconfig.xml?cacheid=f29a7c4a">
-        src: url("/ROOT%23%3F/skin/fonts/Poppins.ttf?cacheid=af705837") format("truetype");
-          src: url("/ROOT%23%3F/skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
     <script type="module" src="/ROOT%23%3F/skin/i18n.js?cacheid=6a8c6fb2" defer></script>
     <script type="text/javascript" src="/ROOT%23%3F/skin/languages.js?cacheid=96f2cf73" defer></script>
     <script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
@@ -296,6 +294,8 @@ R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=e4d76d16"
     {
       /* url */ "/ROOT%23%3F/skin/index.css",
 R"EXPECTEDRESULT(    background-image: url('../skin/search-icon.svg?cacheid=b10ae7ed');
+  src: url("../skin/fonts/Poppins.ttf?cacheid=af705837") format("truetype");
+  src: url("../skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
 )EXPECTEDRESULT"
     },
     {