diff --git a/frontend/public/index.html b/frontend/public/index.html
index 4123528..1e6c0cd 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width,initial-scale=1.0">
+		<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+		<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
+		<title><%= htmlWebpackPlugin.options.title %></title>
+	</head>
+	<body>
+		<noscript>
+			<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+		</noscript>
+		<div id="app"></div>
+		<!-- built files will be auto injected -->
+	</body>
 </html>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cfca9c4..2ead57f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -117,12 +117,14 @@ export default {
 
 <style>
 #app {
-	font-family: Avenir, Helvetica, Arial, sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	color: #2c3e50;
 	margin: 60px;
 }
+h1,h2,h3,h4,p,span{
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+}
 .center-stuff {
 	margin-left: auto;
 	margin-right: auto;
diff --git a/frontend/src/components/Card.vue b/frontend/src/components/Card.vue
index 28a0730..09df376 100644
--- a/frontend/src/components/Card.vue
+++ b/frontend/src/components/Card.vue
@@ -2,7 +2,7 @@
 	<div :class="{ card: true, equipment: card.is_equipment, character:card.is_character }">
 		<h4>{{card.name}}</h4>
 		<div class="emoji">{{card.icon}}</div>
-		<span>{{card.number}}{{suit}}</span>
+		<div class="suit">{{card.number}}{{suit}}</div>
 	</div>
 </template>
 
@@ -78,7 +78,7 @@ export default {
   font-size:26pt;
   top: 35%;
 } 
-.card span {
+.card .suit {
 	position: absolute;
   bottom: 3pt;
   left:3pt;
