Use web fonts.

assets/scss/_predefined.scss

@@ -8,8 +8,80 @@ $midnightblue: #2c3e50;
 $typewriter: hsl(172, 100%, 36%);
 
 // Fonts
-$fonts: "IBM Plex Sans Light", "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
+$fonts: "IBM Plex Sans Light", "Segoe UI", Candara, sans-serif;
-$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";
+$code-fonts: "IBM Plex Mono",  Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, monospace;
+
+@font-face {
+  font-family: 'IBM Plex Sans Light';
+  font-style: normal;
+  font-weight: 400;
+  src: local('IBM Plex Sans Light'),
+    local('IBMPlexSans-Light'),
+    url('/fonts/IBMPlexSans-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans Light';
+  font-style: italic;
+  font-weight: 400;
+  src: local('IBM Plex Sans Light Italic'),
+    local('IBMPlexSans-LightItalic'),
+    url('/fonts/IBMPlexSans-LightItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans Light';
+  font-style: normal;
+  font-weight: 700;
+  src: local('IBM Plex Sans Medm'),
+    local('IBMPlexSans-Medm'),
+    url('/fonts/IBMPlexSans-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans Light';
+  font-style: italic;
+  font-weight: 700;
+  src: local('IBM Plex Sans Medm Italic'),
+    local('IBMPlexSans-MedmItalic'),
+    url('/fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono Light';
+  font-style: normal;
+  font-weight: 400;
+  src: local('IBM Plex Mono Light'),
+    local('IBMPlexMono-Light'),
+    url('/fonts/IBMPlexMono-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono Light';
+  font-style: italic;
+  font-weight: 400;
+  src: local('IBM Plex Mono Light Italic'),
+    local('IBMPlexMono-LightItalic'),
+    url('/fonts/IBMPlexMono-LightItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono Light';
+  font-style: normal;
+  font-weight: 700;
+  src: local('IBM Plex Mono Medm'),
+    local('IBMPlexMono-Medm'),
+    url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono Light';
+  font-style: italic;
+  font-weight: 700;
+  src: local('IBM Plex Mono Medm Italic'),
+    local('IBMPlexMono-MedmItalic'),
+    url('/fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
+}
 
 //Admonition
 $admonition-background: (
@@ -51,4 +123,6 @@ $admonition-color: (
       box-shadow: inset 0 -1em 0 $theme;
     }
   }
-}
+}
+
+