ui: Added font

marko/browser.json

@@ -2,6 +2,7 @@
   "dependencies": [
     "./global/base.less",
     "./global/colors.less",
-    "./global/navbar.less"
+    "./global/navbar.less",
+    "./global/fonts.less"
   ]
 }

marko/global/base.less

@@ -1,7 +1,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  font-family: Aneliza, sans-serif;
   background-color: black;
   color: white;
 

marko/global/fonts.less

@@ -0,0 +1,103 @@
+// Normal
+@font-face {
+  font-family: 'Aneliza';
+  font-weight: normal;
+  font-style: normal;
+  src: url(/assets/fonts/Aneliza-Regular.eot);
+  src: url(/assets/fonts/Aneliza-Regular.eot?#iefix) format('embedded-opentype'),
+       url(/assets/fonts/Aneliza-Regular.woff2) format('woff2'),
+       url(/assets/fonts/Aneliza-Regular.woff) format('woff'),
+       url(/assets/fonts/Aneliza-Regular.ttf) format('truetype'),
+       url(/assets/fonts/Aneliza-Regular.svg#Aneliza-Regular) format('svg');
+}
+
+// Normal Italic
+@font-face {
+  font-family: 'Aneliza';
+  font-weight: normal;
+  font-style: italic;
+  src: url(/assets/fonts/Aneliza-Italic.eot);
+  src: url(/assets/fonts/Aneliza-Italic.eot?#iefix) format('embedded-opentype'),
+       url(/assets/fonts/Aneliza-Italic.woff2) format('woff2'),
+       url(/assets/fonts/Aneliza-Italic.woff) format('woff'),
+       url(/assets/fonts/Aneliza-Italic.ttf) format('truetype'),
+       url(/assets/fonts/Aneliza-Italic.svg#Aneliza-Italic) format('svg');
+}
+
+// Thin
+@font-face {
+  font-family: 'Aneliza';
+  font-weight: 100;
+  font-style: normal;
+  src: url(/assets/fonts/Aneliza-Thin.eot);
+  src: url(/assets/fonts/Aneliza-Thin.eot?#iefix) format('embedded-opentype'),
+       url(/assets/fonts/Aneliza-Thin.woff2) format('woff2'),
+       url(/assets/fonts/Aneliza-Thin.woff) format('woff'),
+       url(/assets/fonts/Aneliza-Thin.ttf) format('truetype'),
+       url(/assets/fonts/Aneliza-Thin.svg#Aneliza-Thin) format('svg');
+}
+
+// Thin Italic
+@font-face {
+  font-family: 'Aneliza';
+  font-weight: 100;
+  font-style: italic;
+  src: url(/assets/fonts/Aneliza-ThinItalic.eot);
+  src: url(/assets/fonts/Aneliza-ThinItalic.eot?#iefix) format('embedded-opentype'),
+       url(/assets/fonts/Aneliza-ThinItalic.woff2) format('woff2'),
+       url(/assets/fonts/Aneliza-ThinItalic.woff) format('woff'),
+       url(/assets/fonts/Aneliza-ThinItalic.ttf) format('truetype'),
+       url(/assets/fonts/Aneliza-ThinItalic.svg#Aneliza-ThinItalic) format('svg');
+}
+
+// Light
+@font-face {
+  font-family: 'Aneliza';
+  font-weight: 200;
+  font-style: normal;
+  src: url(/assets/fonts/Aneliza-Light.eot);
+  src: url(/assets/fonts/Aneliza-Light.eot?#iefix) format('embedded-opentype'),
+       url(/assets/fonts/Aneliza-Light.woff2) format('woff2'),
+       url(/assets/fonts/Aneliza-Light.woff) format('woff'),
+       url(/assets/fonts/Aneliza-Light.ttf) format('truetype'),
+       url(/assets/fonts/Aneliza-Light.svg#Aneliza-Light) format('svg');
+}
+
+// Light Italic
+@font-face {
+  font-family: 'Aneliza';
+  font-weight: 200;
+  font-style: italic;
+  src: url(/assets/fonts/Aneliza-LightItalic.eot);
+  src: url(/assets/fonts/Aneliza-LightItalic.eot?#iefix) format('embedded-opentype'),
+       url(/assets/fonts/Aneliza-LightItalic.woff2) format('woff2'),
+       url(/assets/fonts/Aneliza-LightItalic.woff) format('woff'),
+       url(/assets/fonts/Aneliza-LightItalic.ttf) format('truetype'),
+       url(/assets/fonts/Aneliza-LightItalic.svg#Aneliza-LightItalic) format('svg');
+}
+
+// Bold
+@font-face {
+  font-family: 'Aneliza';
+  font-weight: bold;
+  font-style: normal;
+  src: url(/assets/fonts/Aneliza-Bold.eot);
+  src: url(/assets/fonts/Aneliza-Bold.eot?#iefix) format('embedded-opentype'),
+       url(/assets/fonts/Aneliza-Bold.woff2) format('woff2'),
+       url(/assets/fonts/Aneliza-Bold.woff) format('woff'),
+       url(/assets/fonts/Aneliza-Bold.ttf) format('truetype'),
+       url(/assets/fonts/Aneliza-Bold.svg#Aneliza-Bold) format('svg');
+}
+
+// Bold Italic
+@font-face {
+  font-family: 'Aneliza';
+  font-weight: bold;
+  font-style: italic;
+  src: url(/assets/fonts/Aneliza-BoldItalic.eot);
+  src: url(/assets/fonts/Aneliza-BoldItalic.eot?#iefix) format('embedded-opentype'),
+       url(/assets/fonts/Aneliza-BoldItalic.woff2) format('woff2'),
+       url(/assets/fonts/Aneliza-BoldItalic.woff) format('woff'),
+       url(/assets/fonts/Aneliza-BoldItalic.ttf) format('truetype'),
+       url(/assets/fonts/Aneliza-BoldItalic.svg#Aneliza-BoldItalic) format('svg');
+}

marko/global/navbar.less

@@ -8,8 +8,9 @@ nav.layout-navbar {
   user-select: none;
 
   h1 {
+    font-weight: 100;
     display: inline-block;
-    font-size: 2em;
+    font-size: 2.25em;
     padding: 0.5em 0 0 0;
     margin: 0;
   }

marko/page/story-content/components/page/style.less

@@ -4,6 +4,7 @@
   margin: auto;
 
   h1 {
+    font-weight: 200;
     text-align: center;
   }
 }