feat: webfont for titles

Author: Alan-Liang

.gitignore

@@ -8,6 +8,7 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode
+SourceHanSansCN-*.otf
 maxmind-data
 
 # Runtime data

assets/font/title.woff

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'SHSans EL';
+  font-weight: 200;
+  src: url('~assets/font/title.woff2') format('woff2'),
+    url('~assets/font/title.woff') format('woff');
+}

assets/font/title.woff2

@@ -1,16 +1,22 @@
 <template>
   <container dark header v-bind="$attrs">
-    <h1 class="display-3">{{ title }}</h1>
+    <h1 class="display-3"><slot />{{ title }}</h1>
     <h2 class="subtitle-1">{{ subtitle }}</h2>
   </container>
 </template>
 <script>
 export default {
-  props: { title: String, subtitle: String }, // eslint-disable-line vue/require-default-prop
+  props: {
+    title: { type: String, default: '' },
+    subtitle: { type: String, default: '' },
+  },
 }
 </script>
+
+<style src="~/assets/style/title-font.css" />
 <style scoped>
 .v-application h1.display-3 {
+  font-family: 'SHSans EL' !important;
   font-weight: 200;
   margin: 40px 0 16px;
 }
@@ -20,6 +26,7 @@ export default {
     font-size: 2rem !important;
     line-height: 2rem;
     font-weight: 400;
+    font-family: inherit !important;
   }
 }
 h1, h2 { padding: 0 16px; }