Issue webcompat#2750 - Improves text renderig on mobile

package.json

@@ -20,6 +20,8 @@
     "cssrecipes-grid": "^1.0.0",
     "cssrecipes-reset": "^0.5.0",
     "cssrecipes-utils": "^0.6.2",
+    "fontfaceobserver": "^2.1.0",
+    "handlebars": "^4.1.0",
     "suitcss-utils-align": "^1.0.0",
     "suitcss-utils-display": "^1.0.2",
     "yargs": "^12.0.2"

webcompat/static/css/src/typo.css

@@ -73,3 +73,11 @@ blockquote {
   margin-right: 0;
   padding-left: 1em;
 }
+
+.font-mobile body {
+  font-family: Verdana, sans-serif !important;
+}
+
+.fonts-loaded body {
+  font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
+}

webcompat/static/js/lib/fonts.js

@@ -0,0 +1,27 @@
+if (/Mobi/.test(navigator.userAgent)) {
+  document.documentElement.className += " font-mobile";
+  var sourceSansPro300 = new FontFaceObserver("Source Sans Pro", {
+    weight: 300
+  });
+
+  var sourceSansPro400 = new FontFaceObserver("Source Sans Pro", {
+    weight: 400
+  });
+
+  var openSans400 = new FontFaceObserver("Open Sans", {
+    weight: 400
+  });
+
+  var openSans600 = new FontFaceObserver("Open Sans", {
+    weight: 600
+  });
+
+  Promise.all([
+  sourceSansPro300.load(null, 20000),
+  sourceSansPro400.load(null, 20000),
+  openSans400.load(null, 20000),
+  openSans600.load(null, 20000)
+  ]).then(function() {
+  document.documentElement.className += " fonts-loaded";
+  });
+}

webcompat/templates/layout.html

@@ -9,7 +9,7 @@
   <link rel="mask-icon" href="{{ url_for('static', filename='favicon/safari-pinned-tab.svg') }}" color="#202020">
   <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon/favicon-16x16.png') }}" sizes="16x16">
 
-  <link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Source+Sans+Pro:300,400|PT+Mono">
+  <link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Source+Sans+Pro:300,400|PT+Mono" as="style">
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Source+Sans+Pro:300,400|PT+Mono" rel="stylesheet">
   <link href="{{ url_for('static', filename='css/dist/webcompat.min.css') }}" type="text/css" rel="stylesheet">
 </head>
@@ -24,6 +24,8 @@
 <!-- End Google Analytics -->
 <script src="{{ url_for('static', filename='js/dist/webcompat.min.js')|bust_cache }}"></script>
 {% else %}
+<script src="{{ url_for('static', filename='js/vendor/fontfaceobserver.js') }}"></script>
+<script src="{{ url_for('static', filename='js/lib/fonts.js') }}"></script>
 <script src="{{ url_for('static', filename='js/vendor/jquery-3.3.1.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/vendor/lodash.custom.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/vendor/backbone-1.3.3.min.js') }}"></script>