Add "Alliance" font (github#16012)

* Add font files * Add @font-face bits * Use it once
khmooz · Oct 15, 2020 · 305ea20 · 305ea20
1 parent 6ade353
commit 305ea20
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 1 deletion.
diff --git a/assets/fonts/alliance/alliance-no-1-bold.woff b/assets/fonts/alliance/alliance-no-1-bold.woff
diff --git a/assets/fonts/alliance/alliance-no-1-extrabold.woff b/assets/fonts/alliance/alliance-no-1-extrabold.woff
diff --git a/assets/fonts/alliance/alliance-no-1-medium.woff b/assets/fonts/alliance/alliance-no-1-medium.woff
diff --git a/assets/fonts/alliance/alliance-no-1-regular.woff b/assets/fonts/alliance/alliance-no-1-regular.woff
diff --git a/layouts/product-landing.html b/layouts/product-landing.html
@@ -12,7 +12,7 @@
         <header class="d-flex gutter mb-6">
           <div class="col-12 col-lg-7">
             <span class="text-mono text-gray">Product</span>
-            <h1 class="mb-3">{{ page.shortTitle }}</h1>
+            <h1 class="mb-3 font-mktg">{{ page.shortTitle }}</h1>
             <div class="lead-mktg text-gray">{{ page.intro }}</div>
 
             <a href="{{ gettingStartedLinks[0].href }}" class="btn btn-large f4 btn-blue mt-3">

diff --git a/stylesheets/new-mktg.scss b/stylesheets/new-mktg.scss
@@ -54,3 +54,48 @@
 .bg-blue-dark {
   background-color: $blue-800 !important;
 }
+
+// stylelint-disable primer/no-unused-vars
+
+// Typography
+
+$marketing-font-path: "/assets/fonts/alliance/";
+$font-family-mktg: "Alliance No.1", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-weight-extrabold: 800 !default;
+
+.font-mktg {
+  font-family: $font-family-mktg;
+}
+
+// Type
+@font-face {
+  font-family: "Alliance No.1";
+  font-style: normal;
+  font-weight: $font-weight-normal;
+  src: local("Alliance No.1 Regular"), local("alliance-no-1-regular"), url("#{$marketing-font-path}alliance-no-1-regular.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Alliance No.1";
+  font-style: normal;
+  font-weight: $font-weight-semibold;
+  src: local("Alliance No.1 Medium"), local("alliance-no-1-medium"), url("#{$marketing-font-path}alliance-no-1-medium.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Alliance No.1";
+  font-style: normal;
+  font-weight: $font-weight-bold;
+  src: local("Alliance No.1 Bold"), local("alliance-no-1-bold"), url("#{$marketing-font-path}alliance-no-1-bold.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Alliance No.1";
+  font-style: normal;
+  font-weight: $font-weight-extrabold;
+  src: local("Alliance No.1 ExtraBold"), local("alliance-no-1-extrabold"), url("#{$marketing-font-path}alliance-no-1-extrabold.woff") format("woff");
+  font-display: swap;
+}