implement klavika, open sans

website/source/assets/stylesheets/_buttons.scss

@@ -1,5 +1,5 @@
 @mixin button {
-  font-family: $mono;
+  font-family: $font-family-open-sans;
   height: $button-height;
   line-height: $button-height;
   background-color: transparent;

website/source/assets/stylesheets/_components.scss

@@ -72,7 +72,6 @@ header .header {
   }
 
   h2 {
-    font-family: $serif;
     font-size: 44px;
     color: #7bc6b1;
     margin: 0px;
@@ -181,7 +180,7 @@ header .header {
         color: #b1d631;
         font-size: 14px;
         font-weight: normal;
-        font-family: $mono;
+        font-family: $font-family-mono;
         text-shadow: 0 0 0;
       }
 
@@ -203,7 +202,6 @@ header .header {
         margin-right: 20px;
 
         li {
-          font-family: $serif;
           font-size: 17px;
           line-height: (30/17) !important;
           margin-bottom: $baseline;
@@ -225,10 +223,8 @@ header .header {
       }
 
       div.alert {
-        font-family: $serif;
         font-size: 17px;
         line-height: 1.5;
-        letter-spacing: 1px;
         margin-left: -135px;
         margin-right: -135px;
         padding-top: 40px;

website/source/assets/stylesheets/_helpers.scss

@@ -19,7 +19,7 @@ $border-dark: #333;
 // base measures
 $baseline: 20px;
 $base-font-size: 16px;
-$base-line-height: 20px;
+$base-line-height: 1.5;
 $button-height: 60px;
 
 .center {
@@ -40,13 +40,13 @@ $sidebar-width: 250px;
 
 
 //typography
-$serif: 'myriad-pro', helvetica, Georgia, serif;
-$sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$mono: 'Inconsolata', 'courier new', courier, monospace;
+$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: 'Inconsolata', 'Monaco', 'courier new', courier, monospace;
 
-.serif { font-family: $serif; }
-.sans { font-family: $sans; }
-.mono { font-family: $mono; }
+.open-sans { font-family: $font-family-open-sans;}
+.klavika { font-family: $font-family-klavika; }
+.mono { font-family: $font-family-mono; }
 
 .text-center { text-align: center !important; }
 .text-left { text-align: left !important; }
@@ -56,15 +56,6 @@ $mono: 'Inconsolata', 'courier new', courier, monospace;
 
 .uppercase { text-transform: uppercase !important; }
 
-@font-face {
-    font-family: 'HeimatStencil-SemiBold';
-    src: font-url('2772B2_0_0.eot');
-    src: font-url('2772B2_0_0.woff') format('woff'),
-         font-url('2772B2_0_0.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
 //color
 .dark-background {
   background-color: #000;

website/source/assets/stylesheets/_reset.scss

@@ -9,7 +9,7 @@ form, input, textarea, button {
   -khtml-border-radius: 0;
   border-radius: 0;
   background-color: transparent;
-  font-family: $mono;
+  font-family: $font-family-mono;
   font-size: $base-font-size;
   line-height: 1.0;
   color: inherit;

website/source/assets/stylesheets/_sidebar.scss

@@ -3,7 +3,7 @@
   max-width: 320px;
   $border: 1px solid $gray-dark;
   font-size: 16px;
-  font-family: $mono;
+  font-family: $font-family-mono;
   color: $gray-light;
   background-color: $sidebar-background-color;
 

website/source/assets/stylesheets/_styles.scss

@@ -17,19 +17,17 @@ html {
 
 body {
   background-color: $background;
-  font-family: $sans;
-  letter-spacing: 1px;
+  font-family: $font-family-open-sans;
   font-size: $base-font-size;
   line-height: $base-line-height;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  letter-spacing: 2px;
+  font-family: $font-family-klavika;
   font-weight: normal;
 }
 
 h1 {
-  font-family: $sans;
   font-size: 70px;
   line-height: (80/70);
   @include respond-to(mobile) {
@@ -39,7 +37,6 @@ h1 {
 }
 
 h2 {
-  font-family: $sans;
   font-size: 40px;
   line-height: (50/40);
 
@@ -55,38 +52,31 @@ h2 {
 }
 
 h3 {
-  font-family: $sans;
   font-size: 20px;
   line-height: (30/20);
 }
 
 h4 {
-  font-family: $mono;
+  font-family: $font-family-mono;
   font-size: 20px;
   line-height: (30/20);
 }
 
 h5 {
-  font-family: $sans;
   font-size: 16px;
   line-height: (22/16);
 }
 
 h6 {
-  font-family: $mono;
+  font-family: $font-family-mono;
   font-size: 16px;
   line-height: (22/16);
 }
 
 p {
-  font-family: $serif;
-  font-size: 17px;
-  line-height: (30/17);
-  letter-spacing: 1px;
 
   &.large-text {
     font-size: 20px;
-    line-height: (35/20);
   }
 
   a {
@@ -121,10 +111,8 @@ dt {
 }
 
 dd {
-  font-family: $serif;
   font-size: 17px;
   line-height: 1.5;
-  letter-spacing: 1px;
   margin-bottom: 30px;
 }
 
@@ -159,7 +147,7 @@ pre {
 }
 
 table {
-  font-family: $mono;
+  font-family: $font-family-mono;
   margin: ($baseline * 2) 0;
   color: $gray-dark;
 

website/source/layouts/layout.erb

@@ -13,12 +13,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <link rel="shortcut icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
     <link rel="icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
-    <script type="text/javascript" src="//use.typekit.net/apr3jjs.js"></script>
-    <script type="text/javascript">
-      try {
-        Typekit.load();
-      } catch (e) {}
-    </script>
+
     <!-- Google Tag Manager -->
     <script>
       (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -28,6 +23,11 @@
           })(window,document,'script','dataLayer','GTM-NR2SD7C');
     </script>
     <!-- End Google Tag Manager -->
+
+    <!-- Typekit script to import Klavika -->
+    <script src="https://use.typekit.net/wxf7mfi.js"></script>
+    <script>try{Typekit.load({ async: true });}catch(e){}</script>
+
   </head>
   <body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
     <!-- Google Tag Manager (noscript) -->