diff --git a/index.css b/index.css
index 5001dc9f2..0ab0573bd 100644
--- a/index.css
+++ b/index.css
@@ -13,16 +13,6 @@
   }
 }
 
-@font-face {
-  font-family: 'emerald';
-  src: url('fonts/pokemon-emerald-pro.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'pkmnems';
-  src: url('fonts/pkmnems.ttf') format('truetype');
-}
-
 html {
   touch-action: none;
 }
diff --git a/index.html b/index.html
index 413293971..db4942946 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,17 @@
 	<meta charset="UTF-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title>Pokemon Rogue Battle</title>
+	<style type="text/css">
+		@font-face {
+			font-family: 'emerald';
+			src: url('fonts/pokemon-emerald-pro.ttf') format('truetype');
+		}
+
+		@font-face {
+			font-family: 'pkmnems';
+			src: url('fonts/pkmnems.ttf') format('truetype');
+		}
+	</style>
 	<link rel="stylesheet" type="text/css" href="index.css" />
 </head>