diff --git a/sass/font-hack-subset.scss b/sass/font-hack-subset.scss
index 31281aa..1742ed7 100644
--- a/sass/font-hack-subset.scss
+++ b/sass/font-hack-subset.scss
@@ -10,6 +10,7 @@
   src: url('fonts/hack-regular.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-regular.woff?sha=3114f1256') format('woff');
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -17,6 +18,7 @@
   src: url('fonts/hack-bold-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bold-subset.woff?sha=3114f1256') format('woff');
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -24,6 +26,7 @@
   src: url('fonts/hack-italic-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-italic-webfont.woff?sha=3114f1256') format('woff');
   font-weight: 400;
   font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
@@ -31,4 +34,5 @@
   src: url('fonts/hack-bolditalic-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bolditalic-subset.woff?sha=3114f1256') format('woff');
   font-weight: 700;
   font-style: italic;
+  font-display: swap;
 }
diff --git a/sass/font-hack.scss b/sass/font-hack.scss
index fef7588..f28f250 100644
--- a/sass/font-hack.scss
+++ b/sass/font-hack.scss
@@ -9,6 +9,7 @@
   src: url('fonts/hack-regular.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-regular.woff?sha=3114f1256') format('woff');
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -16,6 +17,7 @@
   src: url('fonts/hack-bold.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bold.woff?sha=3114f1256') format('woff');
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -23,6 +25,7 @@
   src: url('fonts/hack-italic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-italic.woff?sha=3114f1256') format('woff');
   font-weight: 400;
   font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
@@ -30,4 +33,5 @@
   src: url('fonts/hack-bolditalic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bolditalic.woff?sha=3114f1256') format('woff');
   font-weight: 700;
   font-style: italic;
+  font-display: swap;
 }
diff --git a/sass/variables.scss b/sass/variables.scss
index 3b95a9c..c4dc589 100644
--- a/sass/variables.scss
+++ b/sass/variables.scss
@@ -1,2 +1,5 @@
 $phone-max-width: 683px;
 $tablet-max-width: 899px;
+
+// 字体回退栈
+$font-family: 'Hack', 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', 'Courier New', monospace;
diff --git a/templates/macros/head.html b/templates/macros/head.html
index 9af5dce..3e39dd1 100644
--- a/templates/macros/head.html
+++ b/templates/macros/head.html
@@ -4,6 +4,11 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="noodp"/>
+    <!-- 字体预加载 - 减少布局偏移 CLS -->
+    <link rel="preload" href="{{ get_url(path='fonts/hack-regular.woff2?sha=3114f1256') }}" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="{{ get_url(path='fonts/hack-bold.woff2?sha=3114f1256') }}" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="{{ get_url(path='fonts/hack-italic.woff2?sha=3114f1256') }}" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="{{ get_url(path='fonts/hack-bolditalic.woff2?sha=3114f1256') }}" as="font" type="font/woff2" crossorigin>
 
     <link rel="stylesheet" href="{{ get_url(path="style.css", trailing_slash=false) | safe }}">