Building upon #5334: use system fonts as fallback (#5335)

* use font-display optional instead of swap * add System font as Poppins and Noto Sans fallback Co-authored-by: Patrick Kettner <patrickkettner@gmail.com>
ampproject · Feb 10, 2021 · 9a48b73 · 9a48b73
1 parent 65e138d
commit 9a48b73
Show file tree

Hide file tree

Showing 21 changed files with 82 additions and 26 deletions.
diff --git a/frontend/scss/_fonts.scss b/frontend/scss/_fonts.scss
@@ -1,9 +1,65 @@
+/* Define the "system" font family */
+@font-face {
+	font-family: system;
+	font-style: normal;
+	font-weight: 300;
+	src: local('.SFNSText-Light'), local('.HelveticaNeueDeskInterface-Light'), local('.LucidaGrandeUI'), local('Ubuntu Light'), local('Segoe UI Light'), local('Roboto-Light'), local('DroidSans'), local('Tahoma');
+}
+
+@font-face {
+	font-family: system;
+	font-style: italic;
+	font-weight: 300;
+	src: local('.SFNSText-LightItalic'), local('.HelveticaNeueDeskInterface-Italic'), local('.LucidaGrandeUI'), local('Ubuntu Light Italic'), local('Segoe UI Light Italic'), local('Roboto-LightItalic'), local('DroidSans'), local('Tahoma');
+}
+
+@font-face {
+	font-family: system;
+	font-style: normal;
+	font-weight: 400;
+	src: local('.SFNSText-Regular'), local('.HelveticaNeueDeskInterface-Regular'), local('.LucidaGrandeUI'), local('Ubuntu'), local('Segoe UI'), local('Roboto-Regular'), local('DroidSans'), local('Tahoma');
+}
+
+@font-face {
+	font-family: system;
+	font-style: italic;
+	font-weight: 400;
+	src: local('.SFNSText-Italic'), local('.HelveticaNeueDeskInterface-Italic'), local('.LucidaGrandeUI'), local('Ubuntu Italic'), local('Segoe UI Italic'), local('Roboto-Italic'), local('DroidSans'), local('Tahoma');
+}
+
+@font-face {
+	font-family: system;
+	font-style: normal;
+	font-weight: 500;
+	src: local('.SFNSText-Medium'), local('.HelveticaNeueDeskInterface-MediumP4'), local('.LucidaGrandeUI'), local('Ubuntu Medium'), local('Segoe UI Semibold'), local('Roboto-Medium'), local('DroidSans-Bold'), local('Tahoma Bold');
+}
+
+@font-face {
+	font-family: system;
+	font-style: italic;
+	font-weight: 500;
+	src: local('.SFNSText-MediumItalic'), local('.HelveticaNeueDeskInterface-MediumItalicP4'), local('.LucidaGrandeUI'), local('Ubuntu Medium Italic'), local('Segoe UI Semibold Italic'), local('Roboto-MediumItalic'), local('DroidSans-Bold'), local('Tahoma Bold');
+}
+
+@font-face {
+	font-family: system;
+	font-style: normal;
+	font-weight: 700;
+	src: local('.SFNSText-Bold'), local('.HelveticaNeueDeskInterface-Bold'), local('.LucidaGrandeUI'), local('Ubuntu Bold'), local('Roboto-Bold'), local('DroidSans-Bold'), local('Segoe UI Bold'), local('Tahoma Bold');
+}
+
+@font-face {
+	font-family: system;
+	font-style: italic;
+	font-weight: 700;
+	src: local('.SFNSText-BoldItalic'), local('.HelveticaNeueDeskInterface-BoldItalic'), local('.LucidaGrandeUI'), local('Ubuntu Bold Italic'), local('Roboto-BoldItalic'), local('DroidSans-Bold'), local('Segoe UI Bold Italic'), local('Tahoma Bold');
+}
 /* noto-sans-regular - latin */
 @font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  font-display: optional;
   src: local('Noto Sans'), local('NotoSans'),
        url('https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
@@ -13,7 +69,7 @@
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 700;
-  font-display: swap;
+  font-display: optional;
   src: local('Noto Sans Bold'), local('NotoSans-Bold'),
        url('https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
@@ -23,7 +79,7 @@
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 700;
-  font-display: swap;
+  font-display: optional;
   src: local('Poppins Bold'), local('Poppins-Bold'),
        url('https://amp.dev/static/fonts/poppins-v5-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('https://amp.dev/static/fonts/poppins-v5-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
@@ -33,7 +89,7 @@
   font-family: 'Fira Mono';
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  font-display: optional;
   src: local('Fira Mono'), local('FiraMono'),
        url('https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

diff --git a/frontend/scss/base.scss b/frontend/scss/base.scss
@@ -15,7 +15,7 @@ html, body {
   color: color('river-bed');
   background-color: #fff;
   font-size: 16px;
-  font-family: 'Noto Sans', sans-serif;
+  font-family: 'Noto Sans', system;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/frontend/scss/components/atoms/_headline.scss b/frontend/scss/components/atoms/_headline.scss
@@ -26,7 +26,7 @@ stories-home
 @mixin hl {
   margin-top: 1.5rem;
   margin-bottom: .75em;
-  font-family: 'Poppins', sans-serif;
+  font-family: 'Poppins',  system;
   font-weight: 700;
   line-height: 1.2em;
   color: color('charade');

diff --git a/frontend/scss/components/atoms/_text.scss b/frontend/scss/components/atoms/_text.scss
@@ -54,7 +54,7 @@ TODO: mono (inline, block)
 }
 
 @mixin txt-font-accent {
-	font-family: 'Poppins', sans-serif;
+	font-family: 'Poppins',  system;
   font-weight: 700;
 }
 

diff --git a/frontend/scss/components/atoms/pill.scss b/frontend/scss/components/atoms/pill.scss
@@ -17,7 +17,7 @@
   @include txt-strong;
   @include filter-bubble-shadow-regular;
   color: var(--color, safeColor('light-gray'));
-  font-family: 'Noto Sans', sans-serif;
+  font-family: 'Noto Sans', system;
   transition: background-color .2s ease-in, color .2s ease-in, box-shadow .25s ease-in;
   cursor: pointer;
 

diff --git a/frontend/scss/components/molecules/_teaser.scss b/frontend/scss/components/molecules/_teaser.scss
@@ -47,7 +47,7 @@ teaser types. (Success Stories, Templates, Guides and Tutorials, Examples, ...)
 	top: -15px;
 	z-index: 1;
   border-radius: 15px;
-	font-family: 'Poppins';
+	font-family: 'Poppins',  system;
 }
 
 @mixin teaser-tag-zero {

diff --git a/frontend/scss/components/molecules/input-bar.scss b/frontend/scss/components/molecules/input-bar.scss
@@ -78,7 +78,7 @@
       padding: 0 10px;
       border: 0;
       border-radius: 4px 0 0 4px;
-      font-family: Poppins, sans-serif;
+      font-family: 'Poppins',  system;
       font-size: 18px;
       font-weight: bold;
 
@@ -100,7 +100,7 @@
     margin: 0;
     border: 0;
     border-radius: 4px;
-    font-family: Poppins, sans-serif;
+    font-family: 'Poppins',  system;
     text-align: center;
     font-size: 0;
     color: safeColor('white');

diff --git a/frontend/scss/components/molecules/pixi-recommendations-item.scss b/frontend/scss/components/molecules/pixi-recommendations-item.scss
@@ -37,7 +37,7 @@
       width: 80%;
       max-width: 720px;
       margin: 0;
-      font-family: Poppins;
+      font-family: 'Poppins',  system;
       font-size: 22px;
       font-weight: bold;
       line-height: 1.3;
@@ -109,7 +109,7 @@
     overflow: auto;
 
     &-title {
-      font-family: Poppins;
+      font-family: 'Poppins',  system;
       font-size: 16px;
       font-weight: bold;
       color: color('black');

diff --git a/frontend/scss/components/molecules/pixi-share-dialog.scss b/frontend/scss/components/molecules/pixi-share-dialog.scss
@@ -48,7 +48,7 @@
       padding: 10px 15px;
       border: 1px solid safeColor('light-gray');
       border-radius: 4px;
-      font-family: Noto Sans;
+      font-family: 'Noto Sans', system;
       color: safeColor('light-gray');
     }
 

diff --git a/frontend/scss/components/organisms/_sidebar.scss b/frontend/scss/components/organisms/_sidebar.scss
@@ -124,7 +124,7 @@
   padding: 7px 25px 8px 20px;
   text-transform: unset;
   @include txt;
-  font-family: 'Noto Sans', sans-serif;
+  font-family: 'Noto Sans', system;
   @include txt-2;
   line-height: 1.4em;
 }

diff --git a/frontend/scss/components/organisms/cities.scss b/frontend/scss/components/organisms/cities.scss
@@ -145,7 +145,7 @@
       padding: 3px 7px;
       font-size: 14px;
       font-weight: 700;
-      font-family: 'Poppins', sans-serif;
+      font-family: 'Poppins',  system;
       white-space: nowrap;
       text-transform: uppercase;
       color: fade_out(color('charade'), 0.25);

diff --git a/frontend/scss/components/organisms/release-schedule.scss b/frontend/scss/components/organisms/release-schedule.scss
@@ -107,7 +107,7 @@ body.amp-mode-touch .no-touch-only {
 .ellipsis {
   font-weight: bold;
   color: #005af0;
-  font-family: "Poppins", sans-serif;
+  font-family: 'Poppins',  system;
 }
 .content {
   border: 1px dotted #cccccc;

diff --git a/frontend/scss/components/organisms/tools-teaser.scss b/frontend/scss/components/organisms/tools-teaser.scss
@@ -73,7 +73,7 @@ section.#{utility('tools')} {
         padding: 5px 20px;
         line-height: 1.6rem;
         font-size: 12px;
-        font-family: 'Noto Sans', sans-serif;
+        font-family: 'Noto Sans', system;
         font-weight: bold;
         border-radius: 20px;
         transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

diff --git a/frontend/scss/components/templates/success-story.scss b/frontend/scss/components/templates/success-story.scss
@@ -147,7 +147,7 @@ body {
       z-index: 1;
 
       li {
-        font-family: "Noto Sans";
+        font-family: 'Noto Sans', system;;
         line-height: 1.6em;
         font-weight: normal;
         color: #48525c;

diff --git a/frontend/scss/components/templates/tools.scss b/frontend/scss/components/templates/tools.scss
@@ -107,7 +107,7 @@ section.#{utility('tools')} {
     padding: 5px 20px;
     margin: 0;
     font-size: 12px;
-    font-family: 'Noto Sans', sans-serif;
+    font-family: 'Noto Sans', system;
     color: color('iron');
     background: color('white');
     transition: 200ms;

diff --git a/frontend21/scss/variables.scss b/frontend21/scss/variables.scss
@@ -54,4 +54,4 @@ $breakpoints: (
   'max': (min-width: 1680px)
 ) !default;
 
-$fontFamilyRegular: 'Poppins', 'Helvetica', 'Arial', sans-serif;
+$fontFamilyRegular: 'Poppins', system;
diff --git a/playground/src/fly-in/fly-in.scss b/playground/src/fly-in/fly-in.scss
@@ -41,7 +41,7 @@
     height: 60px;
     padding: 0 8px 0 25px;
     border-bottom: 1px solid color('iron');
-    font-family: Poppins;
+    font-family: 'Poppins',  system;
 
     h2 {
       margin: 0 auto 0 0;

diff --git a/playground/src/import-url/import-url.scss b/playground/src/import-url/import-url.scss
@@ -16,7 +16,7 @@
       padding: 0 14px;
       border: 0;
       border-radius: 4px 0 0 4px;
-      font-family: Noto Sans;
+      font-family: 'Noto Sans', system;
       font-size: 16px;
       font-weight: bold;
     }

diff --git a/playground/src/input-bar/autocomplete-item.scss b/playground/src/input-bar/autocomplete-item.scss
@@ -10,7 +10,7 @@
   background: transparent;
   @include txt;
   @include txt-2;
-  font-family: Noto Sans;
+  font-family: 'Noto Sans', system;
   text-align: left;
   cursor: pointer;
 

diff --git a/playground/src/input-bar/input-bar.scss b/playground/src/input-bar/input-bar.scss
@@ -22,7 +22,7 @@
       padding: 0 14px;
       border: 0;
       border-radius: 4px 0 0 4px;
-      font-family: Noto Sans;
+      font-family: 'Noto Sans', system;
       font-size: 16px;
       font-weight: bold;
     }

diff --git a/playground/src/share-view/share-view.scss b/playground/src/share-view/share-view.scss
@@ -36,7 +36,7 @@
 
     @include txt;
     @include txt-2;
-    font-family: Noto Sans;
+    font-family: 'Noto Sans', system;
     color: color('oslo-gray');
   }