diff --git a/src/menu/index.js b/src/menu/index.js
index c715351e..e78d5eca 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -136,6 +136,7 @@ const demoElement = {
         { path: `${pre}basic-layout`, title: '布局' },
         { path: `${pre}basic-container`, title: '布局容器' },
         { path: `${pre}basic-color`, title: '颜色' },
+        { path: `${pre}basic-typography`, title: '字体' },
         { path: `${pre}basic-button`, title: '按钮' }
       ]
     }
diff --git a/src/pages/demo/element/basic-typography/index.vue b/src/pages/demo/element/basic-typography/index.vue
new file mode 100644
index 00000000..a6857ff9
--- /dev/null
+++ b/src/pages/demo/element/basic-typography/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <d2-container type="ghost">
+    <el-card shadow="never">
+      <template slot="header">中文字体</template>
+    </el-card>
+  </d2-container>
+</template>
diff --git a/src/router/index.js b/src/router/index.js
index 5b53913c..df45d017 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,7 @@ const routes = [
       { path: 'basic-layout', name: `${pre}basic-layout`, component: () => import('@/pages/demo/element/basic-layout/index.vue'), meta },
       { path: 'basic-container', name: `${pre}basic-container`, component: () => import('@/pages/demo/element/basic-container/index.vue'), meta },
       { path: 'basic-color', name: `${pre}basic-color`, component: () => import('@/pages/demo/element/basic-color/index.vue'), meta },
+      { path: 'basic-typography', name: `${pre}basic-typography`, component: () => import('@/pages/demo/element/basic-typography/index.vue'), meta },
       { path: 'basic-button', name: `${pre}basic-button`, component: () => import('@/pages/demo/element/basic-button/index.vue'), meta },
       { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/element/index/index.vue'), meta }
     ])('demo-element-')