diff --git a/demo/documentation/components/layout/enUS/absolute.md b/demo/documentation/components/layout/enUS/absolute.md
index 9586d209a..b6ffc7c4c 100644
--- a/demo/documentation/components/layout/enUS/absolute.md
+++ b/demo/documentation/components/layout/enUS/absolute.md
@@ -13,10 +13,10 @@ All layout components can use absolute positioning. It can be used when you want
         Cool Sider
       </n-layout-sider>
       <n-layout mode="absolute">
-        <h1>Long</h1><h1>Long</h1><h1>Long</h1>
-        <h1>Long</h1><h1>Long</h1><h1>Long</h1>
-        <h1>Long</h1><h1>Long</h1><h1>Long</h1>
-        <h1>Long</h1><h1>Long</h1><h1>Long</h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
       </n-layout>
     </n-layout>
     <n-layout-footer mode="absolute" style="height: 64px">
diff --git a/demo/documentation/components/layout/enUS/collapse.md b/demo/documentation/components/layout/enUS/collapse.md
index f8abeb220..3877e1991 100644
--- a/demo/documentation/components/layout/enUS/collapse.md
+++ b/demo/documentation/components/layout/enUS/collapse.md
@@ -27,7 +27,7 @@ Use `collapsed-width` and `width` to set sider's width.
         <span>Content</span>
       </n-layout-content>
       <n-layout-footer>
-        <h1>Footer</h1>
+        <n-h1>Footer</n-h1>
       </n-layout-footer>
     </n-layout>
   </n-layout>
@@ -47,7 +47,7 @@ Use `collapsed-width` and `width` to set sider's width.
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <h1>Sider</h1>
+      <n-h1>Sider</n-h1>
     </n-layout-sider>
     <n-layout 
       mode="absolute"
diff --git a/demo/documentation/components/layout/enUS/debug.md b/demo/documentation/components/layout/enUS/debug.md
index 2e7c25b2e..06b8aaf1f 100644
--- a/demo/documentation/components/layout/enUS/debug.md
+++ b/demo/documentation/components/layout/enUS/debug.md
@@ -13,14 +13,14 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <h1>Sider</h1>
+      <n-h1>Sider</n-h1>
     </n-layout-sider>
     <n-layout mode="absolute" :use-native-scrollbar="false">
       <n-layout-content>
         <span>Content</span>
       </n-layout-content>
       <n-layout-footer>
-        <h1>Footer</h1>
+        <n-h1>Footer</n-h1>
       </n-layout-footer>
     </n-layout>
   </n-layout>
diff --git a/demo/documentation/components/layout/enUS/scrollbar.md b/demo/documentation/components/layout/enUS/scrollbar.md
index 85dadcfea..b1cfb232a 100644
--- a/demo/documentation/components/layout/enUS/scrollbar.md
+++ b/demo/documentation/components/layout/enUS/scrollbar.md
@@ -10,10 +10,10 @@ Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You
         Cool Sider
       </n-layout-sider>
       <n-layout mode="absolute" :use-native-scrollbar="false">
-        <h1>Long</h1><h1>Long</h1><h1>Long</h1>
-        <h1>Long</h1><h1>Long</h1><h1>Long</h1>
-        <h1>Long</h1><h1>Long</h1><h1>Long</h1>
-        <h1>Long</h1><h1>Long</h1><h1>Long</h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
+        <n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
       </n-layout>
     </n-layout>
     <n-layout-footer mode="absolute" style="height: 64px">
diff --git a/demo/documentation/components/layout/enUS/showSiderContent.md b/demo/documentation/components/layout/enUS/showSiderContent.md
index 41270ee4d..0d01ef98a 100644
--- a/demo/documentation/components/layout/enUS/showSiderContent.md
+++ b/demo/documentation/components/layout/enUS/showSiderContent.md
@@ -16,14 +16,14 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <h1>Sider</h1>
+      <n-h1>Sider</n-h1>
     </n-layout-sider>
     <n-layout>
       <n-layout-content>
         <span>Content</span>
       </n-layout-content>
       <n-layout-footer>
-        <h1>Footer</h1>
+        <n-h1>Footer</n-h1>
       </n-layout-footer>
     </n-layout>
   </n-layout>
@@ -44,7 +44,7 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <h1>Sider</h1>
+      <n-h1>Sider</n-h1>
     </n-layout-sider>
     <n-layout 
       mode="absolute"
diff --git a/demo/documentation/components/layout/enUS/triggerButton.md b/demo/documentation/components/layout/enUS/triggerButton.md
index c0b80f97a..6d65e2613 100644
--- a/demo/documentation/components/layout/enUS/triggerButton.md
+++ b/demo/documentation/components/layout/enUS/triggerButton.md
@@ -15,14 +15,14 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <h1>Sider</h1>
+      <n-h1>Sider</n-h1>
     </n-layout-sider>
     <n-layout style="padding: 24px;">
       <n-layout-content>
         <span>Content</span>
       </n-layout-content>
       <n-layout-footer>
-        <h1>Footer</h1>
+        <n-h1>Footer</n-h1>
       </n-layout-footer>
     </n-layout>
   </n-layout>
@@ -42,7 +42,7 @@
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <h1>Sider</h1>
+      <n-h1>Sider</n-h1>
     </n-layout-sider>
     <n-layout 
       mode="absolute"
@@ -52,7 +52,7 @@
         <span>Content</span>
       </n-layout-content>
       <n-layout-footer>
-        <h1>Footer</h1>
+        <n-h1>Footer</n-h1>
       </n-layout-footer>
     </n-layout>
   </n-layout>
diff --git a/styles/Message.scss b/styles/Message.scss
index 95c47568e..fb7d4cf59 100644
--- a/styles/Message.scss
+++ b/styles/Message.scss
@@ -40,7 +40,7 @@
       height: 40px;
       border-radius: 20px;
       flex-shrink: 0;
-      font-weight: 500;
+      font-weight: 400;
       overflow: hidden;
       &#{&}-transition-enter, &#{&}-transition-leave-to {
         opacity: 0;
diff --git a/styles/Select.scss b/styles/Select.scss
index 3d95f273f..193e155a7 100644
--- a/styles/Select.scss
+++ b/styles/Select.scss
@@ -46,7 +46,7 @@
       transform: translateZ(0);
     }
     @include b(select-menu) {
-      @include fade-in-scale-up-transition(select-menu);
+      @include fade-in-scale-up-transition(select-menu, $original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier));
     }
   }
 }
diff --git a/styles/base.scss b/styles/base.scss
index 099213096..df6fdb688 100644
--- a/styles/base.scss
+++ b/styles/base.scss
@@ -1,5 +1,6 @@
 @import './fonts/Lato.scss';
 @import './fonts/FiraCode.scss';
+@import './fonts/FiraSans.scss';
 @import './themes/commonVars.scss';
 @import './themes/light/index.scss';
 @import './Detachable.scss';
diff --git a/styles/fonts/FiraSans.scss b/styles/fonts/FiraSans.scss
new file mode 100644
index 000000000..be4ac52a8
--- /dev/null
+++ b/styles/fonts/FiraSans.scss
@@ -0,0 +1,11 @@
+@font-face {
+  font-family: 'FiraSans';
+  font-weight: 400;
+  src: url('./resources/fonts/FiraSans-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'FiraSans';
+  font-weight: 500;
+  src: url('./resources/fonts/FiraSans-Medium.ttf');
+}
\ No newline at end of file
diff --git a/styles/resources/fonts/FiraSans-Medium.ttf b/styles/resources/fonts/FiraSans-Medium.ttf
new file mode 100644
index 000000000..eeb8f8f0b
Binary files /dev/null and b/styles/resources/fonts/FiraSans-Medium.ttf differ
diff --git a/styles/resources/fonts/FiraSans-Regular.ttf b/styles/resources/fonts/FiraSans-Regular.ttf
new file mode 100644
index 000000000..c4cfa5975
Binary files /dev/null and b/styles/resources/fonts/FiraSans-Regular.ttf differ
diff --git a/styles/themes/commonVars.scss b/styles/themes/commonVars.scss
index 4d71340c7..3bbd1296c 100644
--- a/styles/themes/commonVars.scss
+++ b/styles/themes/commonVars.scss
@@ -1,4 +1,4 @@
-$--n-font-family: 'Lato';
+$--n-font-family: 'FiraSans';
 
 $--n-mono-font-family: 'FiraCode', monospace;
 
diff --git a/styles/themes/vars.scss b/styles/themes/vars.scss
index 9bbcfc295..289f25c7d 100644
--- a/styles/themes/vars.scss
+++ b/styles/themes/vars.scss
@@ -248,14 +248,14 @@ $--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
   }
 }
 
-@mixin fade-in-scale-up-transition($block: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: ()) {
+@mixin fade-in-scale-up-transition($block: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: (), $original-transition: ()) {
   &.#{$namespace}-#{$block}--transition-leave-active {
     transform-origin: $origin;
-    transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier;
+    transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier, $original-transition;
   }
   &.#{$namespace}-#{$block}--transition-enter-active {
     transform-origin: $origin;
-    transition: opacity $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
+    transition: opacity $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier, $original-transition;
   }
   &.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
     opacity: 0;