Include Roboto font and font-family fallback (#1100)

* Include Roboto font and font-family fallback * Optimize loading of Roboto font
fastlane · Jul 26, 2018 · 0434805 · 0434805
1 parent ddb16c7
commit 0434805
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/web/app/dashboard/add-project-dialog/add-project-dialog.component.scss b/web/app/dashboard/add-project-dialog/add-project-dialog.component.scss
@@ -1,5 +1,5 @@
 .fci-dialog-form-section {
-    font-family: 'Roboto';
+    font-family: 'Roboto', sans-serif;
     padding-bottom: 16px;
     &:last-child {
         padding-bottom: 74px;

diff --git a/web/global/input.scss b/web/global/input.scss
@@ -1,7 +1,7 @@
 .fci-input-container {
     padding-bottom: 16px;
     label {
-        font-family: 'Roboto';
+        font-family: 'Roboto', sans-serif;
         color: rgba(0, 0, 0, 0.54);
         font-size: 13px;
         display: block;
@@ -48,7 +48,7 @@
         /** Font */
         color: rgba(0, 0, 0, 0.87);
         font-size: 16px;
-        font-family: 'Roboto';
+        font-family: 'Roboto', sans-serif;
         font-weight: 400;
         line-height: 24px;
         /** Inner text inherits content wrapping */

diff --git a/web/global/theme.scss b/web/global/theme.scss
@@ -1,8 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 
 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+
 // TODO: using theme functions to set the themes instead of overriding manually
-// TODO: Find out if Roboto is packaged in Angular Material
+
 body {
     margin: 0;
     font-family: 'Google Sans', sans-serif; // Default font-family

diff --git a/web/index.html b/web/index.html
@@ -8,7 +8,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 </head>
 
 <body>