feat: try fontaine (#305)

* feat: try fontaine * fix: add override to css var (#307) Co-authored-by: Daniel Roe <[email protected]>
johnnyreilly · Oct 16, 2022 · 1d1208f · 1d1208f
1 parent 5dcb01e
commit 1d1208f
Show file tree

Hide file tree

Showing 4 changed files with 412 additions and 24 deletions.
diff --git a/blog-website/docusaurus.config.js b/blog-website/docusaurus.config.js
@@ -1,6 +1,7 @@
 //@ts-check
 const urlRegex = /^\/\d{4}\/\d{2}\/\d{2}\//;
 
+const fontaine = require('fontaine');
 const FontPreloadPlugin = require('webpack-font-preload-plugin');
 const lightCodeTheme = require('prism-react-renderer/themes/nightOwl'); //github
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
@@ -88,6 +89,34 @@ const config = {
         },
       };
     },
+    function fontainePlugin(_context, _options) {
+      return {
+        name: 'fontaine-plugin',
+        configureWebpack(_config, _isServer) {
+          return {
+            plugins: [
+              fontaine.FontaineTransform.webpack({
+                fallbacks: [
+                  'system-ui',
+                  '-apple-system',
+                  'BlinkMacSystemFont',
+                  'Segoe UI',
+                  'Roboto',
+                  'Oxygen',
+                  'Ubuntu',
+                  'Cantarell',
+                  'Open Sans',
+                  'Helvetica Neue',
+                  'sans-serif',
+                ],
+                // You may need to resolve assets like `/fonts/Roboto.woff2` to a particular directory
+                resolvePath: (id) => '../fonts/' + id,
+              }),
+            ],
+          };
+        },
+      };
+    },
     [
       'ideal-image',
       /** @type {import('@docusaurus/plugin-ideal-image').PluginOptions} */

diff --git a/blog-website/package.json b/blog-website/package.json
@@ -35,6 +35,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.1.0",
     "@tsconfig/docusaurus": "1.0.6",
+    "fontaine": "^0.1.2",
     "typescript": "4.8.4"
   },
   "browserslist": {

diff --git a/blog-website/src/css/custom.css b/blog-website/src/css/custom.css
@@ -18,7 +18,7 @@
   --ifm-footer-link-hover-color: #9998e2;
 
   --ifm-code-font-size: 95%;
-  --ifm-font-family-base: 'Poppins';
+  --ifm-font-family-base: 'Poppins', 'Poppins override';
 }
 
 @font-face {