diff --git a/ui/src/App.vue b/ui/src/App.vue
index 0a8f367..c733013 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -24,3 +24,131 @@ export default class App extends Vue {
   private title_html = "<h1>changeme</h1>";
 }
 </script>
+
+<style lang="scss">
+@font-face {
+  font-family: "Lubalin Graph";
+  src: url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.eot");
+  src: url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.svg#Lubalin BQ")
+      format("svg");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Lubalin Graph";
+  src: url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.eot");
+  src: url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.svg#LubalinGraph-Book")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Praxis";
+  src: url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.eot");
+  src: url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.svg#PraxisEF")
+      format("svg");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Praxis";
+  src: url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.eot");
+  src: url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.svg#PraxisEF")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Demos";
+  src: url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.eot");
+  src: url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.svg#DemosEF")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Demos";
+  src: url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.eot");
+  src: url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.svg#DemosEF")
+      format("svg");
+  font-weight: normal;
+  font-style: italic;
+}
+
+// THW Logo font
+.thw-logo-font {
+  font-family: "Lubalin Graph", serif !important;
+}
+
+// THW Heading font
+.thw-heading-font {
+  font-family: "Neue Praxis", "Roboto", sans-serif !important;
+}
+
+// THW Text font
+.thw-text-font {
+  font-family: "Neue Demos", serif !important;
+}
+
+// THW Citation font
+.thw-citation-font {
+  font-family: "Neue Demos", serif !important;
+
+  * {
+    font-style: italic !important;
+  }
+}
+</style>
diff --git a/ui/src/components/TitleBar.vue b/ui/src/components/TitleBar.vue
index f9bac68..4b6e659 100644
--- a/ui/src/components/TitleBar.vue
+++ b/ui/src/components/TitleBar.vue
@@ -3,7 +3,7 @@
     <v-container class="d-flex pa-0" fluid fill-height>
       <div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
 
-      <div class="d-flex justify-center text-center mx-auto thw-font">
+      <div class="d-flex justify-center text-center mx-auto thw-heading-font">
         <slot> <h1>TITLE</h1> </slot>
       </div>
 
@@ -35,12 +35,8 @@ import Clock from "./Clock.vue";
 export default class TitleBar extends Vue {}
 </script>
 
-<style lang="css" scoped>
+<style scoped>
 .slim {
   max-width: 0;
 }
-
-.thw-font {
-  font-family: "Lubalin Graph", "Roboto", sans-serif !important;
-}
 </style>
\ No newline at end of file
diff --git a/ui/src/sass/variables.scss b/ui/src/sass/variables.scss
new file mode 100644
index 0000000..71db673
--- /dev/null
+++ b/ui/src/sass/variables.scss
@@ -0,0 +1,2 @@
+$heading-font-family: "Neue Praxis", "Roboto", sans-serif;
+$body-font-family: "Neue Demos", serif;
\ No newline at end of file