diff --git a/index.html b/index.html
index 1a4b4e97cbec5666132c2f1880b500fd8d143587..299ea68289be6d18a28ab9e5f9fbe2235fb63bff 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
   <link rel="stylesheet" href="res/Stysheet.css">
   <link rel="stylesheet" href="src/node_modules/animate.css/animate.css">
   <link rel="stylesheet" href="src/node_modules/bootstrap/dist/css/bootstrap.css" integrity="" crossorigin="anonymous">
+  <link href="https://fonts.googleapis.com/css2?family=Fondamento&display=swap" rel="stylesheet"> 
+  <link href="https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500&display=swap" rel="stylesheet"> 
   <title>Main</title>
   <script src="out/main.js"></script>
   <style>
diff --git a/out/main.js b/out/main.js
index c8683fca10a0f971508ccdcc880197523963886d..fc47ea68e26349b17e91e6405a2f345e9496c5d8 100644
--- a/out/main.js
+++ b/out/main.js
@@ -12425,7 +12425,7 @@ var $author$project$DungeonMap$placeIcon = F5(
 										0,
 										$elm$core$String$toFloat(y)) - 11.5)),
 								$elm$svg$Svg$Attributes$title('ObjectIcon'),
-								$elm$svg$Svg$Attributes$xlinkHref('res/icons/hero.png')
+								$elm$svg$Svg$Attributes$xlinkHref('res/icons/Hero.svg')
 							]),
 						_List_Nil),
 						A2(
@@ -14746,7 +14746,7 @@ var $author$project$Main$view = function (model) {
 		$elm$html$Html$div,
 		_List_fromArray(
 			[
-				$elm$html$Html$Attributes$class('wrapper'),
+				$elm$html$Html$Attributes$class('wrapper textFont'),
 				A2($elm$html$Html$Attributes$style, 'height', '100%')
 			]),
 		_List_fromArray(
diff --git a/res/Stysheet.css b/res/Stysheet.css
index f456420006bca71c60fa03ac635a0973d4eeafab..1b8eecd790f603c74e562cede7c53f24f1780cab 100644
--- a/res/Stysheet.css
+++ b/res/Stysheet.css
@@ -17,6 +17,7 @@ html {
     text-align: left;
     padding: 10px;
     margin-bottom: 1%;
+    font-family: 'Fondamento', cursive;
   }
 
 .footer {
@@ -36,6 +37,10 @@ html {
     background-color: #e4be9b;
 }
 
+.textFont {
+    font-family: 'Alegreya', serif;
+}
+
 .grid-container {
     display: grid;
     grid-gap: 2%;
@@ -103,11 +108,11 @@ tr:nth-child(even) {background-color: white;}
 }
 
 .aboutText {
-    padding-left: 10%;
-    padding-right: 10%;
+    padding-left: 5%;
+    padding-right: 5%;
 }
 
 h1.about {
-    padding-top: 20px;
+    padding-top: 2%;
     font-variant: small-caps;
 }
\ No newline at end of file
diff --git a/src/DungeonMap.elm b/src/DungeonMap.elm
index 2f09454f7d2d7fb34dbdcb88ea2213fd1e7ce4c6..e6c719f975a7e6c4b00db03d119ca58623274503 100644
--- a/src/DungeonMap.elm
+++ b/src/DungeonMap.elm
@@ -266,7 +266,7 @@ placeIcon iconType id x y color =
                 , SvgAtt.x (String.fromFloat (Maybe.withDefault 0 (String.toFloat x) - 11.5))
                 , SvgAtt.y (String.fromFloat (Maybe.withDefault 0 (String.toFloat y) - 11.5))
                 , SvgAtt.title "ObjectIcon"
-                , SvgAtt.xlinkHref ("res/icons/hero.png")
+                , SvgAtt.xlinkHref ("res/icons/Hero.svg")
                 ] []
             , Svg.text_ [ SvgAtt.textAnchor "middle"
                 , SvgAtt.x (String.fromFloat (Maybe.withDefault 0 (String.toFloat x) + 1))
diff --git a/src/Main.elm b/src/Main.elm
index 6fa41c9f4e097cde255bc469454adfc990ea8b70..97f512f1fe2e2eae889c8bc5291bc9ea09cd5798 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -264,7 +264,7 @@ update msg model =
 
 view : Model -> Html Msg
 view model =
-    div [Html.Attributes.class "wrapper", Html.Attributes.style "height" "100%"]
+    div [Html.Attributes.class "wrapper textFont", Html.Attributes.style "height" "100%"]
         [ header
         , Tab.config TabMsg
             |> Tab.items