diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss
index 327266af1..5f2e350d3 100755
--- a/website/source/assets/stylesheets/_docs.scss
+++ b/website/source/assets/stylesheets/_docs.scss
@@ -4,6 +4,13 @@
 
 $docs-font-size: 15px;
 
+body.layout-inner{
+  // h2, h3, h4, h5 {
+  //   font-family: $font-family-open-sans;
+  //   text-transform: none;
+  // }
+}
+
 body.layout-docs,
 body.layout-inner,
 body.layout-downloads,
@@ -240,12 +247,17 @@ body.layout-intro{
     margin-bottom: 25px;
   }
 
-  h1, .h1, h2, .h2, h3, .h3, h4, .h4{
+  h1 {
+    margin-top: 48px;
+  }
+
+  h2, .h2, h3, .h3, h4, .h4{
     color: $gray-dark;
     margin-top: 54px;
     margin-bottom: $docs-font-size;
     line-height: 1.3;
     @include open-sb();
+    text-transform: none;
   }
 
   h2 {
diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss
index a7ff8e342..53d817f9a 100755
--- a/website/source/assets/stylesheets/_global.scss
+++ b/website/source/assets/stylesheets/_global.scss
@@ -16,22 +16,17 @@ body {
   font-weight: 500;
 }
 
-
 h1, h2, h3, h4, h5 {
+  font-family: $font-family-klavika;
+  text-transform: uppercase;
   -webkit-font-smoothing: antialiased;
 }
 
 h1{
-  font-family: $font-family-open-sans;
   font-weight: $font-weight-reg;
   margin-bottom: 24px;
 }
 
-h3, h4{
-  font-family: $font-family-open-sans;
-  font-weight: $font-weight-reg;
-}
-
 //an alternative color for buttons in the doc body
 .btn-serf{
   color: $white !important;
@@ -82,6 +77,15 @@ pre {
   margin-bottom: 0;
 }
 
+//Typekit utilites for hiding FOUC
+.wf-loading {
+  visibility: hidden;
+}
+
+.wf-active, .wf-inactive {
+  visibility: visible;
+}
+
 //fixed grid below 992 to prevent smaller responsive sizes
 @media (min-width: 768px) and (max-width: 992px) {
   .container{
@@ -89,7 +93,7 @@ pre {
   }
 }
 
-//guarantees nav list fits at tablet viewport size 
+//guarantees nav list fits at tablet viewport size
 @media (min-width: 768px) and (max-width: 800px) {
   #header .navbar-nav a {
     font-size: 12px !important;
diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index 3490d3aa0..a25782809 100755
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -23,6 +23,11 @@
     z-index: 1;
   }
 
+  p {
+    color: $gray;
+    text-align: center;
+  }
+
   #hero-graphic{
     position: absolute;
     display: inline-block;
@@ -100,6 +105,9 @@
     }
 
     h4{
+      font-family: $font-family-open-sans;
+      font-weight: 500;
+      text-transform: none;
       color: $blue-light;
     }
 
diff --git a/website/source/layouts/_meta.erb b/website/source/layouts/_meta.erb
index bcb3fc783..c27b1f82c 100644
--- a/website/source/layouts/_meta.erb
+++ b/website/source/layouts/_meta.erb
@@ -23,6 +23,10 @@
     })(window,document,'script','dataLayer','GTM-NR2SD7C');</script>
     <!-- End Google Tag Manager -->
 
+    <!-- Typekit script to import Klavika font -->
+    <script src="https://use.typekit.net/wxf7mfi.js"></script>
+    <script>try{Typekit.load({ async: true });}catch(e){}</script>
+
     <%= yield_content :head %>
   </head>