Merge pull request #234 from MITLibraries/use-78

Add and use Adobe Fonts in TIMDEX UI

Author: djanelle-mit

app/assets/stylesheets/partials/_typography.scss

@@ -1,29 +1,39 @@
+// Override fonts from the theme gem, done temporarily for USE UI
+body {
+  font-family: $base-font;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $heading-font;
+  font-weight: $fw-semibold;
+}
+
 .hd-1 {
   font-size: $fs-xxxxlarge;
-  font-weight: $fw-bold;
-  line-height: $lh-xtight;
+  font-weight: $fw-semibold;
+  line-height: $lh-base;
 }
 
 .hd-2 {
   font-size: $fs-xxlarge;
-  font-weight: $fw-bold;
-  line-height: $lh-xtight;
+  font-weight: $fw-semibold;
+  line-height: $lh-base;
 }
 
 .hd-3 {
   font-size: $fs-xlarge;
-  font-weight: $fw-bold;
-  line-height: $lh-xtight;
+  font-weight: $fw-semibold;
+  line-height: $lh-base;
 }
 
 .hd-4 {
-  line-height: $lh-xtight;
+  line-height: $lh-base;
 }
 
 .hd-5 {
-  line-height: $lh-xtight;
+  line-height: $lh-base;
 }
 
 .hd-6 {
-  line-height: $lh-xtight;
+  line-height: $lh-base;
 }

app/assets/stylesheets/partials/_variables.scss

@@ -2,6 +2,10 @@
 // #TYPOGRAPHY
 // ----------------------------
 
+// Font family definitions
+$base-font: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif;
+$heading-font: neue-haas-grotesk-display, "Helvetica Neue", Helvetica, Arial, sans-serif;
+
 // Font sizes, weights, and line heights
 // 1 rem is 10 px...
 $fs-base:      1.6rem; // Pentagram originally specified 1.4
@@ -10,8 +14,9 @@ $fs-xxlarge:   3.2rem;
 $fs-xxxlarge:  4.2rem; // unused by default
 $fs-xxxxlarge: 5.2rem;
 
-$fw-normal: 400;
-$fw-bold:   700;
+$fw-normal:   400;
+$fw-semibold: 600;
+$fw-bold:     700;
 
-$lh-xtight:  .92;
+$lh-xtight: 0.92;
 $lh-base:   1.2;

app/views/layouts/_head.html.erb

@@ -12,7 +12,7 @@
   <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
 <![endif]-->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic&subset=latin,latin-ext" type="text/css">
+<%= stylesheet_link_tag 'https://use.typekit.net/ixd2vgq.css' %>
 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
 
 <!-- For all other devices -->