feat: Add new fonts to the application

CarlosPavajeau · May 28, 2021 · c52c8d2 · c52c8d2
1 parent 5cac98c
commit c52c8d2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 deletions.
diff --git a/Kaizen/ClientApp/src/index.html b/Kaizen/ClientApp/src/index.html
@@ -1,24 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Kaizen</title>
-    <base href="/" />
+<head>
+  <meta charset="utf-8"/>
+  <title>Kaizen</title>
+  <base href="/"/>
 
-    <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/css?family=Roboto:300,400,500&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-    />
-  </head>
+  <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/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500&display=swap" rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
+</head>
 
-  <body class="mat-typography">
-    <app-root></app-root>
-    <script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>
-  </body>
+<body class="mat-typography">
+<app-root></app-root>
+<script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>
+</body>
 </html>
diff --git a/Kaizen/ClientApp/src/styles/base.scss b/Kaizen/ClientApp/src/styles/base.scss
@@ -1,3 +1,4 @@
+@import 'typography';
 
 * {
   --yellow_sunshine: #fffb16;
@@ -57,7 +58,7 @@ body {
 
 body {
   margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, Ubuntu, Inter, Roboto, Helvetica Neue, sans-serif !important;
 }
 
 a {

diff --git a/Kaizen/ClientApp/src/styles/typography.scss b/Kaizen/ClientApp/src/styles/typography.scss
@@ -0,0 +1,8 @@
+@use '~@angular/material' as mat;
+
+$custom-typography: mat.define-typography-config(
+  $font-family: '-apple-system, Ubuntu, Inter, Roboto, Helvetica Neue, sans-serif !important',
+);
+
+@include mat.all-component-typographies($custom-typography);
+