fonts! [netlify-build]

Author: forstisabella

src/_includes/navbar/logo.html

@@ -139,22 +139,22 @@ $font-color: map-get($color-values, gray-800) !default;
 /// Default font family.
 ///
 /// @type {Value|Values}
-$font-family-primary: "SF Pro Text", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+$font-family-primary: "Twilio Sans Text", "SF Pro Text", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
 
 /// Monospace font family.
 ///
 /// @type {Value|Values}
-$font-family-monospace: "Droid Sans Mono", "Lucida Console", "Monaco", monospace !default;
+$font-family-monospace: "Twilio Sans Mono", "Droid Sans Mono", "Lucida Console", "Monaco", monospace !default;
 
 /// Font weight of headings.
 ///
 /// @type {Number|Keyword}
-$heading-font-weight: 600 !default;
+$heading-font-weight: 500 !default;
 
 /// Font family of headings.
 ///
 /// @type {Keyword|Values}
-$heading-font-family: $font-family-primary !default;
+$heading-font-family: "Twilio Sans Display", "SF Pro Text", sans-serif !default;
 
 /// Color of headings.
 ///

src/_sass/_variables.scss

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: 'Twilio Sans Display';
+  src: 
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Regular.eot') format ('eot'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Regular.woff2') format('woff2'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Regular.woff') format('woff'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Regularltl.eot') format ('eot'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Regularltl.woff2') format('woff2'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Regularltl.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Twilio Sans Display';
+  src: 
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Medium.eot') format ('eot'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Medium.woff2') format('woff2'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Medium.woff') format('woff'),
+    url ('fonts/twilio-sans-display/TwilioSansDisplay-Mediumltl.eot') format ('eot'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Medium.woff2') format('woff2'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Twilio Sans Display';
+  src: 
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Heavy.eot') format ('eot'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Heavy.woff2') format('woff2'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Heavy.woff') format('woff'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Heavyltl.eot') format ('eot'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Heavyltl.woff2') format('woff2'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Heavyltl.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Twilio Sans Display';
+  src: 
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Semibold.eot') format ('eot'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Semibold.woff2') format('woff2'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Semibold.woff') format('woff'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Semiboldltl.eot') format ('eot'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Semiboldltl.woff2') format('woff2'),
+    url('fonts/twilio-sans-display/TwilioSansDisplay-Semiboldltl.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

src/_sass/fonts/_twilio-sans-display.scss

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: "Twilio Sans Mono";
+  src: 
+    url("fonts/twilio-sans-mono/TwilioSansMono-Regular.eot") format ("eot"),
+    url("fonts/twilio-sans-mono/TwilioSansMono-Regular.woff2") format("woff2"),
+    url("fonts/twilio-sans-mono/TwilioSansMono-Regular.woff") format("woff"),
+    url("fonts/twilio-sans-mono/TwilioSansMono-Regularltl.eot") format ("eot"),
+    url("fonts/twilio-sans-mono/TwilioSansMono-Regularltl.woff2") format("woff2"),
+    url("fonts/twilio-sans-mono/TwilioSansMono-Regularltl.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

src/_sass/fonts/_twilio-sans-mono.scss

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: 'Twilio Sans Text';
+  src: 
+    url('fonts/twilio-sans/TwilioSansText-Regular.eot') format ('eot'),
+    url('fonts/twilio-sans/TwilioSansText-Regular.woff2') format('woff2'),
+    url('fonts/twilio-sans/TwilioSansText-Regular.woff') format('woff'),
+    url('fonts/twilio-sans/TwilioSansText-Regularltl.eot') format ('eot'),
+    url('fonts/twilio-sans/TwilioSansText-Regularltl.woff2') format('woff2'),
+    url('fonts/twilio-sans/TwilioSansText-Regularltl.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Twilio Sans Text';
+  src: 
+    url('fonts/twilio-sans/TwilioSansText-Medium.eot') format ('eot'),
+    url('fonts/twilio-sans/TwilioSansText-Medium.woff2') format('woff2'),
+    url('fonts/twilio-sans/TwilioSansText-Medium.woff') format('woff'),
+    url('fonts/twilio-sans/TwilioSansText-Mediumltl.eot') format ('eot'),
+    url('fonts/twilio-sans/TwilioSansText-Mediumltl.woff2') format('woff2'),
+    url('fonts/twilio-sans/TwilioSansText-Mediumltl.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Twilio Sans Text';
+  src: 
+    url('fonts/twilio-sans/TwilioSansText-Heavy.eot') format ('eot'),
+    url('fonts/twilio-sans/TwilioSansText-Heavy.woff2') format('woff2'),
+    url('fonts/twilio-sans/TwilioSansText-Heavy.woff') format('woff'),
+    url('fonts/twilio-sans/TwilioSansText-Heavyltl.eot') format ('eot'),
+    url('fonts/twilio-sans/TwilioSansText-Heavyltl.woff2') format('woff2'),
+    url('fonts/twilio-sans/TwilioSansText-Heavyltl.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Twilio Sans Text';
+  src: 
+    url('fonts/twilio-sans/TwilioSansText-Semibold.eot') format ('eot'),
+    url('fonts/twilio-sans/TwilioSansText-Semibold.woff2') format('woff2'),
+    url('fonts/twilio-sans/TwilioSansText-Semibold.woff') format('woff'),
+    url('fonts/twilio-sans/TwilioSansText-Semiboldltl.eot') format ('eot'),
+    url('fonts/twilio-sans/TwilioSansText-Semiboldltl.woff2') format('woff2'),
+    url('fonts/twilio-sans/TwilioSansText-Semiboldltl.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

src/_sass/fonts/_twilio-sans-text.scss

@@ -16,6 +16,9 @@
 // =================================================
 @import "fonts/droid-sans-mono";
 @import "fonts/sf-pro";
+@import "fonts/twilio-sans-display";
+@import "fonts/twilio-sans-mono";
+@import "fonts/twilio-sans-text";
 
 // Generics
 // =================================================