diff --git a/source/css/common/css-variables.styl b/source/css/common/css-variables.styl
index 8bf6fe86..c44c4be6 100644
--- a/source/css/common/css-variables.styl
+++ b/source/css/common/css-variables.styl
@@ -33,7 +33,9 @@
   --header-height 70px
   --header-shrink-height calc(var(--header-height) * 0.72)
   --header-backdrop-filter-blur 4px
-  --header-scroll-progress-bar-height 2PX
+  --header-scroll-progress-bar-height 2px
+  --header-title-font-family var(--base-font-family)
+  --header-title-font-size 1.8rem
 
 
   // ==============================================================================================
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 0a71a78d..7943939d 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -1,4 +1,3 @@
-$site-name-font-size = 1.8rem
 $pc-search-icon-font-size = 1.5rem
 $menu-bar-line-height = 2.5px
 $logo-image-box-width = 2.68rem
@@ -96,16 +95,17 @@ $logo-image-box-width = 2.68rem
       .site-name {
         color var(--text-color-1)
         font-weight 600
-        font-size $site-name-font-size
+        font-size var(--header-title-font-size)
+        font-family var(--header-title-font-family)
         line-height 1
         letter-spacing 1px
 
         +keep-tablet() {
-          font-size $site-name-font-size * 0.9
+          font-size calc(var(--header-title-font-size) * 0.9)
         }
 
         +keep-mobile() {
-          font-size $site-name-font-size * 0.8
+          font-size calc(var(--header-title-font-size) * 0.8)
         }
       }
     }