[+] LXGWWenKai

src/App.vue

@@ -121,8 +121,6 @@ export default class App extends Vue
     z-index: 2
     pointer-events: none
 
-    font-family: "Microsoft YaHei UI", $font
-
     #menu
         padding: 5px 10px
         margin: 15px 10px

src/css/font.sass

@@ -0,0 +1,7 @@
+@font-face
+  font-family: 'WenKai'
+  src: url("/fonts/LXGWWenKai-Regular.woff2") format('woff2'), url("/fonts/LXGWWenKai-Regular.woff") format('woff')
+
+.font-custom
+  font-family: "WenKai", var(--font-fallback)
+  //line-height: 1.3em

src/css/global.sass

@@ -1,4 +1,5 @@
 @import colors
+@import font
 
 // Google Fonts
 // TODO: Localize
@@ -7,7 +8,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap')
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap')
 
-$font: "Noto Sans SC", Avenir, Helvetica, Arial, sans-serif
+html
+  --font-fallback: "Noto Sans SC", Avenir, Helvetica, Arial, sans-serif
+  @extend .font-custom
 
 .font-code
   font-family: Inconsolata, Monaco, Monospaced, serif
@@ -113,7 +116,6 @@ body
   text-overflow: ellipsis
 
 #app
-  font-family: $font
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
   text-align: center