diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss
index 132c4ba20..e5af033ff 100755
--- a/website/source/assets/stylesheets/_docs.scss
+++ b/website/source/assets/stylesheets/_docs.scss
@@ -99,7 +99,7 @@ body.layout-intro{
 	.docs-sidenav{
 		padding-top: 15px;
 		padding-bottom: 15px;
-		font-family: "Klavika-web";
+		font-family: $font-family-klavika;
 		font-size: 16px;
 
 		:last-child{
diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss
index b5082113e..d292c49d5 100755
--- a/website/source/assets/stylesheets/_global.scss
+++ b/website/source/assets/stylesheets/_global.scss
@@ -17,7 +17,7 @@ body {
 
 h1, h2, h3, h4, h5 {
     -webkit-font-smoothing: antialiased;
-    font-family: "klavika-web";
+    font-family: $font-family-klavika;
     font-weight: 600;
 }
 h1{
@@ -74,6 +74,14 @@ pre {
 	margin-bottom: 0;
 }
 
+// Typekit utilites to hide FOUC
+.wf-loading {
+  visibility: hidden;
+}
+.wf-active, .wf-inactive {
+  visibility: visible;
+}
+
 
 //fixed grid below 992 to prevent smaller responsive sizes
 @media (max-width: 992px) {
diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss
index 1a3a8711e..4acd72169 100755
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@@ -14,7 +14,7 @@ body.page-sub{
   .navbar-brand {
     .logo{
       font-size: 32px;
-      font-family: "Klavika-web";
+      font-family: $font-family-klavika;
       font-weight: 500;
       background: image-url('logo-header.png') 0 0 no-repeat;
       @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height);
diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss
index 0047afc03..768ff74ab 100755
--- a/website/source/assets/stylesheets/_variables.scss
+++ b/website/source/assets/stylesheets/_variables.scss
@@ -45,6 +45,7 @@ $link-hover-color:      	darken($link-color, 15%);
 // Typography
 // -------------------------
 $font-family-open-sans: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-klavika: 'klavika-web', 'klavika', 'Open Sans', Helvetica, Arial, sans-serif;
 
 $text-shadow: 				1px 1px 1px #000;
 $shadow: 					    $text-shadow;