diff --git a/web/include/hoj.css b/web/include/hoj.css
index 6c3bacc..339b6f9 100644
--- a/web/include/hoj.css
+++ b/web/include/hoj.css
@@ -1,4 +1,32 @@
 @import url(../bootstrap/css/bootstrap.css);
+:root {
+    --hustoj-global-mono-font: "Sarasa Mono SC", "Sarasa Fixed SC", "Sarasa Gothic SC", Consolas, "Cascadia Mono", "Cascadia Code", "Fira Mono", "JetBrains Mono", "Liberation Mono", Menlo, Monaco, "Courier New", monospace;
+}
+
+body,
+button,
+input,
+select,
+textarea,
+table,
+th,
+td,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div.content,
+.sampledata,
+.toprow a,
+.toprow a:hover,
+.menu_item a,
+#profile,
+#broadcast {
+    font-family: var(--hustoj-global-mono-font) !important;
+}
+
 input{
    height:24px;
 }
@@ -28,14 +56,12 @@ h2 {
 }
 .toprow a {
     color: #FFFFFF;
-    font-family: Arial;
     font-size: 18px;
     font-weight: bold;
     margin: 15px;
 }
 .toprow a:hover {
     color: orange;
-    font-family: Arial;
     font-size: 18px;
     font-weight: bold;
     margin: 15px;
@@ -103,7 +129,6 @@ span.exadmin {
 }
 div.content {
     background: none repeat scroll 0 0 #E4F0F8;
-    font-family: Times New Roman;
     font-size: 14px;
     height: auto;
     margin: 0;
@@ -113,7 +138,6 @@ div.content {
 }
 .sampledata {
     background: none repeat scroll 0 0 #8DB8FF;
-    font-family: Monospace;
     font-size: 18px;
     white-space: pre;
 }
diff --git a/web/template/syzoj/css.php b/web/template/syzoj/css.php
index ca0d323..862967d 100644
--- a/web/template/syzoj/css.php
+++ b/web/template/syzoj/css.php
@@ -11,3 +11,69 @@
 <link href="<?php echo $OJ_CDN_URL.$path_fix."template/$OJ_TEMPLATE"?>/css/FiraMono.css" rel="stylesheet">
 <link href="<?php echo $path_fix."template/$OJ_TEMPLATE"?>/css/latin.css" rel="stylesheet">
 <link href="<?php echo $path_fix."template/$OJ_TEMPLATE"?>/css/Exo.css" rel="stylesheet">
+<style>
+        :root {
+                --hustoj-global-mono-font: "Sarasa Mono SC", "Sarasa Fixed SC", "Sarasa Gothic SC", Consolas, "Cascadia Mono", "Cascadia Code", "Fira Mono", "JetBrains Mono", "Liberation Mono", Menlo, Monaco, "Courier New", monospace;
+        }
+
+        html,
+        body,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        button,
+        input,
+        optgroup,
+        select,
+        textarea,
+        pre,
+        code,
+        kbd,
+        samp,
+        .ui.header,
+        .ui.button,
+        .ui.input > input,
+        .ui.search > .prompt,
+        .ui.menu,
+        .ui.form,
+        .ui.form input:not([type]),
+        .ui.form input[type="date"],
+        .ui.form input[type="datetime-local"],
+        .ui.form input[type="email"],
+        .ui.form input[type="file"],
+        .ui.form input[type="number"],
+        .ui.form input[type="password"],
+        .ui.form input[type="search"],
+        .ui.form input[type="tel"],
+        .ui.form input[type="text"],
+        .ui.form input[type="time"],
+        .ui.form input[type="url"],
+        .ui.form textarea,
+        .ui.form select,
+        .ui.text.container,
+        .ui.segment,
+        .ui.message,
+        .ui.label,
+        .ui.dropdown,
+        .ui.table,
+        .ui.card > .content,
+        .ui.cards > .card > .content,
+        .ui.list > .item,
+        .ui.list .list > .item,
+        .ui.statistic > .value,
+        .ui.statistic > .label,
+        .vditor,
+        .vditor-reset,
+        .vditor-reset *,
+        .ace_editor,
+        .ace_editor textarea,
+        .ace_content,
+        .ace_gutter,
+        .ace_line,
+        .ace_text-layer {
+                font-family: var(--hustoj-global-mono-font) !important;
+        }
+ </style>
diff --git a/web/template/syzoj/css/style.css b/web/template/syzoj/css/style.css
index 37baec8..cee8dd3 100644
--- a/web/template/syzoj/css/style.css
+++ b/web/template/syzoj/css/style.css
@@ -1,4 +1,12 @@
 @import url('../../bs3/bootstrap.min.css');
+
+:root {
+  --hustoj-global-mono-font: "Sarasa Mono SC", "Sarasa Fixed SC",
+    "Sarasa Gothic SC", Consolas, "Cascadia Mono", "Cascadia Code",
+    "Fira Mono", "JetBrains Mono", "Liberation Mono", Menlo, Monaco,
+    "Courier New", monospace;
+}
+
 .ui.header,
 .ui.button,
 .ui.input input,
@@ -21,11 +29,7 @@ h3,
 h4,
 h5,
 body {
-  font-family: Lato, -apple-system, "PingFang SC",
-    /* Apple */ "Source Han Sans SC", "Noto Sans CJK SC",
-    /* Google */ "Microsoft Yahei", "Lantinghei SC", "Hiragino Sans GB",
-    "Microsoft Sans Serif", /* M$ */ "WenQuanYi Micro Hei",
-    /* *nix */ sans-serif;
+  font-family: var(--hustoj-global-mono-font) !important;
 }
 
 a.black-link {
@@ -37,13 +41,37 @@ a.black-link:hover {
 }
 
 .font-content {
-  font-family: "Open Sans", "Source Han Sans SC", "Noto Sans CJK SC",
-    "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+  font-family: var(--hustoj-global-mono-font) !important;
 }
 
 .markdown-edit {
-  font-family: "Fira Mono", "Noto Sans CJK SC", "PingFang SC",
-    "Hiragino Sans GB", "Microsoft Yahei", monospace;
+  font-family: var(--hustoj-global-mono-font) !important;
+}
+
+.ui.form textarea,
+.ui.form select,
+.ui.text.container,
+.ui.segment,
+.ui.message,
+.ui.label,
+.ui.dropdown,
+.ui.table,
+.ui.card > .content,
+.ui.cards > .card > .content,
+.ui.list > .item,
+.ui.list .list > .item,
+.ui.statistic > .value,
+.ui.statistic > .label,
+.vditor,
+.vditor-reset,
+.vditor-reset *,
+.ace_editor,
+.ace_editor textarea,
+.ace_content,
+.ace_gutter,
+.ace_line,
+.ace_text-layer {
+  font-family: var(--hustoj-global-mono-font) !important;
 }
 
 .padding {