feat: use variable fonts from fontsources

stafyniaksacha · stafyniaksacha · commit c00295507774 · 2023-09-17T16:23:06.000+02:00
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,23 +1,4 @@
 import { defineConfig } from 'astro/config';
-import Unfonts from 'unplugin-fonts/astro'
 
 // https://astro.build/config
-export default defineConfig({
-  integrations: [
-    Unfonts({
-      google: {
-        families: [
-          'Material+Icons',
-          {
-            name: 'Roboto',
-            styles: 'wght@300;400;500;700',
-          },
-          {
-            name: 'Nunito',
-            styles: 'wght@400;600;700;800'
-          },
-        ],
-      },
-    })
-  ]
-});
+export default defineConfig({});
diff --git a/package.json b/package.json
@@ -35,8 +35,10 @@
     "simplebar": "6.2.5"
   },
   "devDependencies": {
+    "@fontsource-variable/nunito": "^5.0.9",
+    "@fontsource-variable/roboto-flex": "^5.0.8",
+    "@fontsource/material-icons": "^5.0.7",
     "autoprefixer": "10.4.15",
-    "npm-run-all": "4.1.5",
-    "unplugin-fonts": "^1.0.3"
+    "npm-run-all": "4.1.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
@@ -1,9 +1,14 @@
 ---
 import { ViewTransitions } from 'astro:transitions';
-import Unfont from 'unplugin-fonts/astro/component.astro';
+
 import Sidebar from "../components/Sidebar.astro";
 import Footer from "../components/Footer.astro";
 import BackToTop from "../components/BackToTop.astro";
+
+import '@fontsource-variable/nunito/index.css';
+import '@fontsource/material-icons/index.css';
+import '@fontsource-variable/roboto-flex/index.css';
+
 import "simplebar/dist/simplebar.min.css";
 import "../styles/main.scss";
 const { title } = Astro.props;
@@ -13,7 +18,6 @@ const { title } = Astro.props;
 <html dir="ltr" lang="en">
   <head>
     <meta charset="UTF-8" />
-    <Unfont />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Fresh {"- " + title}</title>
diff --git a/src/layouts/Minimal.astro b/src/layouts/Minimal.astro
@@ -1,9 +1,14 @@
 ---
 import { ViewTransitions } from 'astro:transitions';
-import Unfont from 'unplugin-fonts/astro/component.astro';
+
 import BackToTop from '../components/BackToTop.astro'
+
+import '@fontsource-variable/nunito';
+import '@fontsource/material-icons';
+import '@fontsource-variable/roboto-flex';
 import 'simplebar/dist/simplebar.min.css'
 import 'plyr/dist/plyr.css'
+
 import '../styles/main.scss'
 const {title} = Astro.props
 ---
@@ -12,7 +17,6 @@ const {title} = Astro.props
 <html dir="ltr" lang="en">
   <head>
     <meta charset="UTF-8" />
-    <Unfont />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Fresh {'- ' + title}</title>
diff --git a/src/styles/abstracts/_colors.scss b/src/styles/abstracts/_colors.scss
@@ -32,8 +32,9 @@ $border-grey: #ccc;
 $muted-grey: #999;
 $section-grey: #fbfbfb;
 
-//Heading font
-$font: 'Montserrat', sans-serif !important;
+//fonts
+$font: 'Roboto Flex', sans-serif !important;
+$font-heading: 'Nunito Variable', sans-serif !important;
 
 //Shadow
 $light-shadow: -1px 3px 15px 0 rgba(0, 0, 0, 0.06);
diff --git a/src/styles/components/_cards.scss b/src/styles/components/_cards.scss
@@ -19,7 +19,7 @@ Cards and Card content styles
   padding: 2.5rem;
 
   .card-title h4 {
-    font-family: "Nunito", sans-serif;
+    font-family: $font-heading;
     font-size: 1.2rem;
     font-weight: 600;
     color: $blue-grey;
diff --git a/src/styles/components/_testimonials.scss b/src/styles/components/_testimonials.scss
@@ -46,7 +46,7 @@ Testimonials Styles
   }
 
   blockquote:before {
-    font-family: "Material Icons";
+    font-family: "Material Icons", sans-serif;
     content: "\e244";
     position: absolute;
     font-size: 30px;
diff --git a/src/styles/layout/_sections.scss b/src/styles/layout/_sections.scss
@@ -3,7 +3,7 @@ Section Styles
 ========================================================================== */
 
 body {
-  font-family: "Roboto", sans-serif;
+  font-family: $font;
 }
 
 h1,
@@ -12,7 +12,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Nunito", sans-serif;
+  font-family: $font-heading;
 }
 
 //Sections
@@ -47,7 +47,7 @@ h6 {
 
   .title,
   .subtitle {
-    font-family: "Nunito", sans-serif;
+    font-family: $font-heading;
   }
 
   .subtitle {
@@ -73,7 +73,7 @@ h6 {
 
   .title,
   .subtitle {
-    font-family: "Nunito", sans-serif;
+    font-family: $font-heading;
   }
 
   .subtitle {
diff --git a/src/styles/layout/_sidebar.scss b/src/styles/layout/_sidebar.scss
@@ -146,7 +146,7 @@ Sidebar Styles
       max-width: 400px;
       list-style: none;
       list-style-type: none;
-      font-family: "Roboto", sans-serif !important;
+      font-family: $font;
 
       li {
         position: relative;
diff --git a/src/styles/utilities/_utils.scss b/src/styles/utilities/_utils.scss
@@ -62,7 +62,7 @@ body {
       &:after {
         outline: none;
         content: "\e316";
-        font-family: "Material Icons";
+        font-family: "Material Icons", sans-serif;
         position: relative;
         display: block;
         top: 52%;

Original file line number	Diff line number	Diff line change
`@@ -35,8 +35,10 @@`
`35`	`35`	`"simplebar": "6.2.5"`
`36`	`36`	`},`
`37`	`37`	`"devDependencies": {`
	`38`	`+ "@fontsource-variable/nunito": "^5.0.9",`
	`39`	`+ "@fontsource-variable/roboto-flex": "^5.0.8",`
	`40`	`+ "@fontsource/material-icons": "^5.0.7",`
`38`	`41`	`"autoprefixer": "10.4.15",`
`39`		`- "npm-run-all": "4.1.5",`
`40`		`- "unplugin-fonts": "^1.0.3"`
	`42`	`+ "npm-run-all": "4.1.5"`
`41`	`43`	`}`
`42`	`44`	`}`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ Testimonials Styles`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`blockquote:before {`
`49`		`- font-family: "Material Icons";`
	`49`	`+ font-family: "Material Icons", sans-serif;`
`50`	`50`	`content: "\e244";`
`51`	`51`	`position: absolute;`
`52`	`52`	`font-size: 30px;`