diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss
index 98a67644d..442ca26fe 100755
--- a/website/source/assets/stylesheets/_docs.scss
+++ b/website/source/assets/stylesheets/_docs.scss
@@ -129,7 +129,7 @@ body.layout-intro{
 
     > a {
       text-transform: uppercase;
-      font-family: $font-family-museo;
+      font-family: $font-family-open-sans;
       font-weight: $font-weight-museo-sb;
       -webkit-font-smoothing: antialiased;
     }
@@ -144,7 +144,6 @@ body.layout-intro{
 
       > a{
         -webkit-font-smoothing: antialiased;
-        font-family: $font-family-source-sans;
         padding: 6px 15px;
       }
 
@@ -156,7 +155,6 @@ body.layout-intro{
           padding: 6px 0;
           > a{
             -webkit-font-smoothing: antialiased;
-            font-family: $font-family-source-sans;
           }
         }
       }
@@ -189,7 +187,6 @@ body.layout-intro{
 
   p, li, .alert {
     font-size: 20px;
-    font-family: $font-family-source-sans;
     font-weight: $font-weight-open;
     line-height: 1.5em;
     margin: 0 0 18px;
diff --git a/website/source/assets/stylesheets/_fonts.scss b/website/source/assets/stylesheets/_fonts.scss
deleted file mode 100755
index 622dc908d..000000000
--- a/website/source/assets/stylesheets/_fonts.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-//
-// Typography
-// --------------------------------------------------
-
-//light
-.rls-l{
-  font-family: $font-family-museo;
-  font-weight: $font-weight-museo-xl;
-}
-
-//semibold
-.rls-sb{
-  font-family: $font-family-museo;
-  font-weight: $font-weight-museo-sb;
-}
-
-//extrabold
-.rls-xb{
-  font-family: $font-family-museo;
-  font-weight: $font-weight-museo-xb;
-}
diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss
index bb34b2df3..572f5cc8a 100755
--- a/website/source/assets/stylesheets/_global.scss
+++ b/website/source/assets/stylesheets/_global.scss
@@ -13,10 +13,14 @@ body {
   font-weight: 300;
 }
 
+h1, h2, h3, h4, h5 {
+  font-family: $font-family-klavika;
+}
+
 h1{
   font-size: 42px;
   line-height: 42px;
-  font-family: $font-family-museo;
+  font-family: $font-family-klavika;
   font-weight: $font-weight-museo-sb;
   margin-bottom: 24px;
 }
@@ -24,10 +28,14 @@ h1{
 h3{
   font-size: 28px;
   line-height: 28px;
-  font-family: $font-family-museo;
+  font-family: $font-family-klavika;
   font-weight: $font-weight-museo-sb;
 }
 
+p {
+  font-family: $font-family-open-sans;
+}
+
 //an alternative color for buttons in the doc body
 .btn-serf{
   color: $white !important;
diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index 3dd9d2647..cb6b4f962 100755
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -21,7 +21,7 @@ body.page-home{
     font-size: 24px;
     letter-spacing: 2px;
     color: $purple;
-    font-family: $font-family-museo;
+    font-family: $font-family-klavika;
     font-weight: $font-weight-museo-xb;
   }
   p{
@@ -29,7 +29,7 @@ body.page-home{
     letter-spacing: 1px;
     line-height: 1.5em;
     color: $consul-gray;
-    font-family: $font-family-museo;
+    font-family: $font-family-open-sans;
     font-weight: $font-weight-museo-sb;
   }
 
@@ -112,7 +112,6 @@ body.page-home{
     letter-spacing: 1px;
     line-height: 1.5em;
     color: $consul-gray;
-    font-family: $font-family-museo;
     font-weight: $font-weight-museo-sb;
   }
 
@@ -150,7 +149,7 @@ body.page-home{
     h2 {
       font-size: 22px;
       text-transform: uppercase;
-      font-family: $font-family-museo;
+      font-family: $font-family-klavika;
       font-weight: $font-weight-museo-xb;
     }
 
@@ -159,7 +158,7 @@ body.page-home{
       letter-spacing: 1px;
       line-height: 1.5em;
       color: $consul-gray;
-      font-family: $font-family-museo;
+      font-family: $font-family-open-sans;
       font-weight: $font-weight-museo-sb;
     }
   }
@@ -213,7 +212,7 @@ body.page-home{
             font-size: 14px;
             letter-spacing: 1px;
             color: $gray-darker;
-            font-family: $font-family-museo;
+            font-family: $font-family-klavika;
             font-weight: $font-weight-museo-xb;
           }
 
diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss
index a6049b0ee..82de86e75 100755
--- a/website/source/assets/stylesheets/_variables.scss
+++ b/website/source/assets/stylesheets/_variables.scss
@@ -46,8 +46,9 @@ $link-hover-color:           darken($link-color, 15%);
 
 // Typography
 // -------------------------
-$font-family-museo:          'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-source-sans:    'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-open-sans:      "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-klavika:        "klavika-web", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-mono:           "Courier New", Monaco, Menlo, Consolas, monospace;
 $font-weight-museo-xl:       100;
 $font-weight-museo-reg:      300;
 $font-weight-museo-sb:       500;
diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss
index f20d2ee0f..a4ce07f3e 100644
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@@ -11,9 +11,6 @@
 // Utility classes
 @import "_utilities";
 
-// Core CSS
-@import "_fonts";
-
 //Global Site
 @import "_global";
 
diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb
index 8f5417a95..cb9095215 100644
--- a/website/source/layouts/_header.erb
+++ b/website/source/layouts/_header.erb
@@ -29,6 +29,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>