installs fonts

_sass/_base.scss

@@ -86,9 +86,17 @@ li {
  * Headings
  */
 h1, h2, h3, h4, h5, h6 {
-    font-weight: $base-font-weight;
+    font-family: $header-font-family;
+    font-size: nth($header-font-size, -1); // default to smallest header size
+    font-weight: $base-font-weight ;
 }
 
+@for $i from 1 through length($header-font-size) {
+  h#{$i} {
+    font-size: nth($header-font-size, $i);
+    font-weight: nth($header-font-weight, $i);
+  }
+}
 
 /**
  * Links

_sass/_fonts.scss

@@ -0,0 +1,287 @@
+// Reforma2018
+// https://pampatype.com/reforma
+
+/* Webfont: Reforma2018 Blanca */@font-face {
+    font-family: 'Reforma2018';
+    src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.woff2') format('woff2'), /* /* Super Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.woff') format('woff'), /* Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.eot') format('woff'),
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.ttf') format('truetype');	 /* Safari, Android, iOS */
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Reforma2018 BlancaItalica */@font-face {
+    font-family: 'Reforma2018';
+    src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.woff2') format('woff2'), /* /* Super Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.woff') format('woff'), /* Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.eot') format('woff'),
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.ttf') format('truetype');     /* Safari, Android, iOS */
+    font-style: italic;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+// /* Webfont: Reforma2018 Gris */@font-face {
+//     font-family: 'Reforma2018';
+//     src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-Gris.woff2') format('woff2'), /* /* Super Modern Browsers */
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-Gris.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-Gris.eot') format('woff'),
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-Gris.ttf') format('truetype');	 /* Safari, Android, iOS */
+//     font-style: normal;
+//     font-weight: 500;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Reforma2018 GrisItalica */@font-face {
+//     font-family: 'Reforma2018';
+//     src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-GrisItalica.woff2') format('woff2'), /* /* Super Modern Browsers */
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-GrisItalica.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-GrisItalica.eot') format('woff'),
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-GrisItalica.ttf') format('truetype');     /* Safari, Android, iOS */
+//     font-style: italic;
+//     font-weight: 500;
+//     text-rendering: optimizeLegibility;
+// }
+
+/* Webfont: Reforma2018 Negra */@font-face {
+    font-family: 'Reforma2018';
+    src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.woff2') format('woff2'), /* /* Super Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.woff') format('woff'), /* Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.eot') format('woff'),
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.ttf') format('truetype');	 /* Safari, Android, iOS */
+    font-style: normal;
+    font-weight: 700;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Reforma2018 NegraItalica */@font-face {
+    font-family: 'Reforma2018';
+    src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.woff2') format('woff2'), /* /* Super Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.woff') format('woff'), /* Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.eot') format('woff'),
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.ttf') format('truetype');     /* Safari, Android, iOS */
+    font-style: italic;
+    font-weight: 700;
+    text-rendering: optimizeLegibility;
+}
+
+// LATO
+// https://www.latofonts.com/lato-free-../assets/fonts/lato/
+
+// /* Webfont: Lato-Black */@font-face {
+//     font-family: 'LatoWebBlack';
+//     src: url('../assets/fonts/lato/Lato-Black.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Black.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Black.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-BlackItalic */@font-face {
+//     font-family: 'LatoWebBlack';
+//     src: url('../assets/fonts/lato/Lato-BlackItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-BlackItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+/* Webfont: Lato-Bold */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-Bold.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Bold.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Bold.ttf') format('truetype');
+    font-style: normal;
+    font-weight: bold;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-BoldItalic */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-BoldItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: bold;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Regular */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-Regular.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Regular.ttf') format('truetype');
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Italic */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-Italic.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Italic.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Italic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Light */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-Light.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Light.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Light.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 300;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-LightItalic */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-LightItalic.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-LightItalic.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-LightItalic.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-LightItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: 300;
+    text-rendering: optimizeLegibility;
+}
+
+// /* Webfont: Lato-Hairline */@font-face {
+//     font-family: 'LatoWebHairline';
+//     src: url('../assets/fonts/lato/Lato-Hairline.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Hairline.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Hairline.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-HairlineItalic */@font-face {
+//     font-family: 'LatoWebHairline';
+//     src: url('../assets/fonts/lato/Lato-HairlineItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-HairlineItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-HairlineItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-HairlineItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-HairlineItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-Heavy */@font-face {
+//     font-family: 'LatoWebHeavy';
+//     src: url('../assets/fonts/lato/Lato-Heavy.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Heavy.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Heavy.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Heavy.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-HeavyItalic */@font-face {
+//     font-family: 'LatoWebHeavy';
+//     src: url('../assets/fonts/lato/Lato-HeavyItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-HeavyItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-HeavyItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-HeavyItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-HeavyItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-Medium */@font-face {
+//     font-family: 'LatoWebMedium';
+//     src: url('../assets/fonts/lato/Lato-Medium.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Medium.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Medium.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-MediumItalic */@font-face {
+//     font-family: 'LatoWebMedium';
+//     src: url('../assets/fonts/lato/Lato-MediumItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-MediumItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-MediumItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-MediumItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-Semibold */@font-face {
+//     font-family: 'LatoWebSemibold';
+//     src: url('../assets/fonts/lato/Lato-Semibold.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Semibold.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Semibold.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-SemiboldItalic */@font-face {
+//     font-family: 'LatoWebSemibold';
+//     src: url('../assets/fonts/lato/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-SemiboldItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-Thin */@font-face {
+//     font-family: 'LatoWebThin';
+//     src: url('../assets/fonts/lato/Lato-Thin.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Thin.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Thin.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Thin.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-ThinItalic */@font-face {
+//     font-family: 'LatoWebThin';
+//     src: url('../assets/fonts/lato/Lato-ThinItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-ThinItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-ThinItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-ThinItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-ThinItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }

_sass/_layout.scss

@@ -204,13 +204,6 @@
 }
 
 .post-title {
-    font-size: 42px;
-    letter-spacing: -1px;
-    line-height: 1;
-
-    @include media-query($on-laptop) {
-        font-size: 36px;
-    }
 }
 
 .post-content {

css/main.scss

@@ -4,14 +4,20 @@
 @charset "utf-8";
 
 
-
 // Our variables
-$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$base-font-family: Reforma2018, serif;
 $base-font-size:   20px;
-$base-font-weight: 400;
+$base-font-weight: normal;
 $small-font-size:  $base-font-size * 0.875;
 $base-line-height: 1.5;
 
+$header-font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+$header-line-height: 1.5;
+// array of font sizes and weights for h1, h2, h3, etc
+// note: both lists need to be the same length
+$header-font-size:   35px, 29px, 24px, 19px;
+$header-font-weight: bold, normal, normal, normal;
+
 $spacing-unit:     30px;
 
 $text-color:       #111;
@@ -47,6 +53,7 @@ $on-laptop:        800px;
 
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import
+        "fonts",
         "base",
         "layout",
         "syntax-highlighting"