chore: move google fonts to a build-time import

QuantumPickleJar · Jan 23, 2022 · 067b0a8 · 067b0a8
1 parent 22cc684
commit 067b0a8
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -141,6 +141,7 @@
     "husky": "^7.0.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",
+    "postcss-import-url": "^7.0.0",
     "postcss-load-config": "^3.1.1",
     "postcss-preset-env": "^7.2.3",
     "prettier": "~2.5.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -3,6 +3,7 @@ const tailwindCSS = require('tailwindcss');
 const tailwindCSSNesting = require('tailwindcss/nesting');
 // ^ Just for now, will merge to tailwindcss. Check https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css
 const autoprefixer = require('autoprefixer');
+const importUrl = require('postcss-import-url');
 
 module.exports = {
   plugins: [
@@ -13,6 +14,9 @@ module.exports = {
       }
     }),
 
+    importUrl({
+      modernBrowser: true
+    }),
     tailwindCSSNesting(),
     tailwindCSS(),
     autoprefixer,

diff --git a/src/app.html b/src/app.html
@@ -4,12 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&family=Roboto&family=Roboto+Mono&family=Material+Icons&display=swap"
-      rel="stylesheet"
-    />
 
     %svelte.head%
   </head>

diff --git a/src/routes/_global.postcss b/src/routes/_global.postcss
@@ -2,6 +2,8 @@
 @import '../../node_modules/prismjs/themes/prism-okaidia.css';
 @import '../../node_modules/cookieconsent/build/cookieconsent.min.css';
 
+@import 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&family=Roboto&family=Roboto+Mono&family=Material+Icons&display=swap';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;