Self-host homepage fonts to improve page load speed (#1370)

Co-authored-by: mundry <mundry@users.noreply.github.com>

14 files changed, 52 insertions, 5 deletions

diff --git a/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff b/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff
new file mode 100644
index 000000000..07daf023c
--- /dev/null
+++ b/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff
diff --git a/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff2 b/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff2
new file mode 100644
index 000000000..0e7fd7312
--- /dev/null
+++ b/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff2
diff --git a/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff b/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff
new file mode 100644
index 000000000..3a1402bf1
--- /dev/null
+++ b/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff
diff --git a/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff2 b/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff2
new file mode 100644
index 000000000..a447d3a73
--- /dev/null
+++ b/www/public/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff2
diff --git a/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff
new file mode 100644
index 000000000..0d8bbcc1d
--- /dev/null
+++ b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff
diff --git a/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff2 b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff2
new file mode 100644
index 000000000..72f092e23
--- /dev/null
+++ b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff2
diff --git a/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff
new file mode 100644
index 000000000..0f5553f5c
--- /dev/null
+++ b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff
diff --git a/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff2 b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff2
new file mode 100644
index 000000000..23bc0e16d
--- /dev/null
+++ b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff2
diff --git a/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff
new file mode 100644
index 000000000..9b6a98aec
--- /dev/null
+++ b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff
diff --git a/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff2 b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff2
new file mode 100644
index 000000000..295c22fea
--- /dev/null
+++ b/www/public/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff2
diff --git a/www/src/components/BaseHead.astro b/www/src/components/BaseHead.astro
index 6593200de..07063d6c6 100644
--- a/www/src/components/BaseHead.astro
+++ b/www/src/components/BaseHead.astro
@@ -34,8 +34,3 @@ const { title, description, image = 'https://astro.build/social.jpg?v=1', canoni
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={image} />
-
-<!-- Fonts -->
-<link rel="dns-prefetch" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;700&display=swap">
diff --git a/www/src/scss/blog.scss b/www/src/scss/blog.scss
index 3be4f48ec..08dc0262c 100644
--- a/www/src/scss/blog.scss
+++ b/www/src/scss/blog.scss
@@ -1,3 +1,4 @@
+@use './fonts.scss';
 @use './code.scss';
 
 :root {
diff --git a/www/src/scss/fonts.scss b/www/src/scss/fonts.scss
new file mode 100644
index 000000000..8d67b31fb
--- /dev/null
+++ b/www/src/scss/fonts.scss
@@ -0,0 +1,49 @@
+/* ibm-plex-sans-regular - latin */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+       url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ibm-plex-sans-600 - latin */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local(''),
+       url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ibm-plex-sans-700 - latin */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+       url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v9-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ibm-plex-mono-regular - latin */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+       url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ibm-plex-mono-700 - latin */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+       url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/assets/fonts/ibm-plex-mono/ibm-plex-mono-v7-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
diff --git a/www/src/scss/global.scss b/www/src/scss/global.scss
index 111e5bac3..e27a31a44 100644
--- a/www/src/scss/global.scss
+++ b/www/src/scss/global.scss
@@ -1,3 +1,5 @@
+@use './fonts.scss';
+
 :root {
   --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',