Merge pull request #155 from ember-learn/updating-typography

[redesign] Updating typography

Author: ghislaineguerin

addon/styles/addon.css

@@ -1,6 +1,7 @@
 @import "normalize.css";
 
 @import "global.css";
+@import "typography.css";
 
 @import "components/es-navbar.css";
 @import "components/es-header.css";

addon/styles/global.css

@@ -7,10 +7,6 @@
   --text-preset-4: 18pt;
 }
 
-body {
-  font-size: 16pt;
-}
-
 .container {
   max-width: var(--container-width-large);
   margin-left: auto;

addon/styles/typography.css

@@ -0,0 +1,36 @@
+/* open-sans-300 - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/fonts/open-sans-v16-latin-300.eot'); /* IE9 Compat Modes */
+  src: local('Open Sans Light'), local('OpenSans-Light'),
+       url('/fonts/open-sans-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/fonts/open-sans-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+       url('/fonts/open-sans-v16-latin-300.woff') format('woff'), /* Modern Browsers */
+       url('/fonts/open-sans-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('/fonts/open-sans-v16-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+/* open-sans-regular - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/open-sans-v16-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+       url('/fonts/open-sans-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/fonts/open-sans-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('/fonts/open-sans-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('/fonts/open-sans-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('/fonts/open-sans-v16-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+
+body {
+  font-size: 16pt;
+  font-family: "Source Sans Pro", sans-serif;
+  font-weight: 300;
+}
+
+h1 {
+  font-weight: 300;
+}

index.js

@@ -36,12 +36,19 @@ module.exports = {
         'tests/dummy/public'
       ]
     },
-    googleFonts: [
-      'Roboto:400,700'
-    ],
   },
 
   treeForPublic: function() {
     return new Funnel(path.join(this.root, 'public'));
   },
+
+  contentFor: function(type) {
+    if (type === 'head') {
+      // preload the most common fonts for modern browsers
+      return `<link rel="preload" as="font" type="font/woff2" href="/fonts/open-sans-v16-latin-regular.woff2" crossorigin>
+<link rel="preload" as="font" type="font/woff2" href="/fonts/open-sans-v16-latin-300.woff2" crossorigin>`;
+    }
+
+    return '';
+  }
 };

package-lock.json

@@ -29,7 +29,6 @@
     "broccoli-funnel": "^2.0.1",
     "broccoli-merge-trees": "^3.0.1",
     "ember-cli-babel": "^7.1.2",
-    "ember-cli-google-fonts": "^2.16.2",
     "ember-cli-htmlbars": "^3.0.0",
     "ember-cli-postcss": "^4.2.0",
     "ember-svg-jar": "^1.2.2",