⚡️ use local fonts only

alexfriesen · Nov 21, 2023 · 8ddeea9 · 8ddeea9
1 parent 04a4b81
commit 8ddeea9
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -61,6 +61,8 @@
     "@angular/cli": "^17.0.0",
     "@angular/compiler-cli": "^17.0.0",
     "@angular/language-service": "^17.0.0",
+    "@fontsource/material-icons": "^5.0.7",
+    "@fontsource/roboto": "^5.0.8",
     "@types/jasmine": "~4.0.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^18.0.0",

diff --git a/projects/demo/src/assets/fonts/MaterialIcons-Regular.woff b/projects/demo/src/assets/fonts/MaterialIcons-Regular.woff
diff --git a/projects/demo/src/assets/fonts/MaterialIcons-Regular.woff2 b/projects/demo/src/assets/fonts/MaterialIcons-Regular.woff2
diff --git a/projects/demo/src/index.html b/projects/demo/src/index.html
@@ -18,10 +18,6 @@
     <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/css2?family=Roboto:wght@300;400;500&display=swap"
-      rel="stylesheet"
-    />
   </head>
   <body class="mat-app-background">
     <app-root></app-root>

diff --git a/projects/demo/src/scss/fonts.scss b/projects/demo/src/scss/fonts.scss
@@ -0,0 +1,21 @@
+@import '@fontsource/roboto/300.css';
+@import '@fontsource/roboto/400.css';
+@import '@fontsource/roboto/500.css';
+@import '@fontsource/material-icons';
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px; /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/projects/demo/src/styles.scss b/projects/demo/src/styles.scss
@@ -1,14 +1,8 @@
 @use "@angular/material" as mat;
+@import "scss/fonts";
 @import "scss/themes";
 @import "scss/core";
 
-@font-face {
-	font-family: "Material Icons";
-	font-style: normal;
-	font-weight: 400;
-	src: url("assets/fonts/MaterialIcons-Regular.woff") format("woff");
-}
-
 $primary-color: mat.get-color-from-palette($candy-app-primary);
 $accent-color: mat.get-color-from-palette($candy-app-accent);
 $primary-color-dark: mat.get-color-from-palette($dark-primary);
@@ -154,11 +148,9 @@ mat-icon.mat-icon.ngx-mtp-theme-example {
 
 // Include the default theme styles.
 @include mat.all-component-themes($candy-app-theme);
-// @include mat.all-component-themes($candy-app-theme); // doesn't work yet
 
 .dark-theme {
 	@include mat.all-component-colors($dark-theme);
-	// @include mat.all-component-themes($dark-theme); // doesn't work yet
 
 	a {
 		&.mat-color-primary {

diff --git a/yarn.lock b/yarn.lock
@@ -1742,6 +1742,16 @@
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.0.tgz#0709e9f4cb252351c609c6e6d8d6779a8d25edff"
   integrity sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==
 
+"@fontsource/material-icons@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@fontsource/material-icons/-/material-icons-5.0.7.tgz#9d3d5654871e32ef509c168e90ee9dc008eecfbe"
+  integrity sha512-QNEk24i1KhV1MoZqpLHfD+T90N2U8lzYxyeHbr6qAWTJG7KgOMib4TA+RonS9vtBT4sw59L9e9Wd1vebXxOhOQ==
+
+"@fontsource/roboto@^5.0.8":
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-5.0.8.tgz#613b477a56f21b5705db1a67e995c033ef317f76"
+  integrity sha512-XxPltXs5R31D6UZeLIV1td3wTXU3jzd3f2DLsXI8tytMGBkIsGcc9sIyiupRtA8y73HAhuSCeweOoBqf6DbWCA==
+
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.13"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"