diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index c95bbb87..dc2a02d9 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -2,6 +2,7 @@
  *= require strap-on
  *= require formtastic-bootstrap
  *= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
+ *= require osem-fonts
  *= require osem
  *= require osem-rating
  *= require osem-schedule
@@ -9,7 +10,6 @@
  *= require osem-dashboard
  *= require osem-splash
  *= require font-awesome
- *= require osem-fonts
  *= require bootstrap-markdown
  *= require bootstrap-datetimepicker
  *= require leaflet
diff --git a/app/assets/stylesheets/osem-fonts.css.scss b/app/assets/stylesheets/osem-fonts.css.scss
index c2ea6493..0791e8dd 100644
--- a/app/assets/stylesheets/osem-fonts.css.scss
+++ b/app/assets/stylesheets/osem-fonts.css.scss
@@ -42,4 +42,4 @@
 
 .fa-suse:before {
   content: "a";
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/osem.css.scss b/app/assets/stylesheets/osem.css.scss
index 79768c5d..f2c57467 100644
--- a/app/assets/stylesheets/osem.css.scss
+++ b/app/assets/stylesheets/osem.css.scss
@@ -1,13 +1,25 @@
+//== max mearsheimers colors
+$darkgray: #263238;
+$blue: #22C2E6;
+$mediumgray: #4A4A4A;
+$green: rgba(121, 188, 130, 1);
+$darkblue: rgba(0, 123, 171, 1);
+
+//== Bootstrap Colors
+$brand-primary: $blue;
+
 html {
   position: relative;
   min-height: 100%;
 }
+$program: 'program-n4', Program, sans-serif;
 
 body {
   /* Margin bottom by 2 times the footer height */
   margin-bottom: 60px;
   /* Margin bottom by navbar height */
   padding-top: 60px;
+  font-family: $program, Program, serif !important;
 }
 
 #content {
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index a9f7582e..d09abca0 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -3,10 +3,13 @@
     %meta{charset: 'utf-8'}
     %meta{name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1'}
     %title= content_for?(:title) ? yield(:title) : (ENV['OSEM_NAME'] || 'OSEM')
+    = javascript_include_tag '//use.typekit.net/uzo8iqp.js'
+    %script{ type: 'text/javascript', src: '//use.typekit.net/uzo8iqp.js' }
+    %script{ type: 'text/javascript' } try{Typekit.load();}catch(e){}
     %meta{content: '', name: 'description'}
     %meta{content: '', name: 'author'}
-    = stylesheet_link_tag "application", media: 'all'
     = javascript_include_tag "application"
+    = stylesheet_link_tag "application", media: 'all'
 
     = csrf_meta_tags
     :javascript