Fix #3266, Use standard Firefox product font-family throughout

Based on Photon design style,
http://design.firefox.com/photon/visual/typography.html#typefaces

Except we are not using Fira Sans anywhere, relying instead on system
fonts.

server/src/pages/homepage/view.js

@@ -6,7 +6,7 @@ const style = `
   html, body {
     padding: 0;
     margin: 0;
-    font-family: SF UI Text, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
     font-size: 12pt;
   }
 
@@ -129,7 +129,6 @@ const style = `
       border-radius: 3px;
       cursor: pointer;
       display: inline-block;
-      font-family: Fira Sans,sans-serif;
       font-weight: 400;
       height: 40px;
       line-height: 40px;
@@ -236,7 +235,7 @@ const style = `
 
   .section-content h3 {
     font-size: 2.5em;
-    font-weight: 100;
+    font-weight: 400;
     margin: 0;
   }
 

static/css/inline-selection.scss

@@ -265,7 +265,7 @@ $very-light-grey: #ededed;
   position: absolute;
   pointer-events: none;
   font-weight: bold;
-  font-family: sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
   font-size: 70%;
   color: #000;
   text-shadow:
@@ -379,7 +379,7 @@ $very-light-grey: #ededed;
   @include flex-container(row, center, center);
   animation: pulse 125mm $bezier;
   color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
   font-size: 24px;
   line-height: 32px;
   text-align: center;

static/css/metrics.scss

@@ -1,5 +1,5 @@
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
 }
 
 table.generic-table {

static/css/onboarding.scss

@@ -15,7 +15,7 @@ $super-blue: #00d1e6;
 html,
 body {
   box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
   height: 100%;
   margin: 0;
   width: 100%;

static/css/partials/_base.scss

@@ -10,7 +10,7 @@ html {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
   margin: 0;
 }
 

static/css/settings.scss

@@ -14,13 +14,11 @@
 .header {
   color: #383e49;
   font-size: 28px;
-  font-family: SFUIDisplay-Regular, sans-serif;
 }
 
 .sub-header {
   color: #222;
   font-size: 16.8px;
-  font-family: SFUIText-Bold, sans-serif;
   font-weight: bold;
   letter-spacing: -0.31px;
 }
@@ -41,15 +39,13 @@
   }
 
   .username {
-    font-family: SFUIDisplay-Semibold, sans-serif;
     font-weight: 500;
     font-size: 19.2px;
     color: #383e49;
     margin: 0 0 -20px;
   }
 
   .email {
-    font-family: SFUIDisplay-Regular, sans-serif;
     font-size: 14.6px;
     color: #383e49;
   }

static/css/styles.scss

@@ -12,7 +12,7 @@ body {
   min-height: 100%;
   width: 100%;
   margin: 0;
-  font-family: sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
   background-color: $background-color;
   color: $text-color;
   box-sizing: border-box;
@@ -57,7 +57,6 @@ body {
 }
 
 #private-notice {
-  font-family: sans-serif;
   font-size: 14px;
   margin-top: 7px;
   padding: 7px;
@@ -242,7 +241,6 @@ a:hover {
   background: #f25820;
   color: #fff;
   text-decoration: none;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   text-align: center;
   text-transform: uppercase;
   padding: 3px 40px;
@@ -306,7 +304,6 @@ a.subheading-link {
   vertical-align: middle;
   background-image: none;
   font-weight: normal;
-  font-family: sans-serif;
   text-transform: none;
   text-indent: 0;
   border-radius: 4px;

static/homepage/css/help.css

@@ -1,5 +1,5 @@
 html {
-  font-family: sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
   height: 100%;
 }
 

static/homepage/css/style.css

@@ -5,7 +5,7 @@ body {
 
 html {
   box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
 }
 
 .myshots-button {

static/homepage/install-test-local.html

@@ -4,7 +4,7 @@
     <title>Install Dev Firefox Screenshots</title>
     <style type="text/css">
       html {
-        font-family: sans-serif;
+        font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
       }
       .button {
         font-size: 120%;