diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml
index c6289fe26125..7dad9d0594bc 100644
--- a/.stylelintrc.yaml
+++ b/.stylelintrc.yaml
@@ -96,7 +96,7 @@ rules:
   property-no-vendor-prefix: null
   rule-empty-line-before: null
   rule-selector-property-disallowed-list: null
-  scale-unlimited/declaration-strict-value: [[color, background-color, border-color], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false}]
+  scale-unlimited/declaration-strict-value: [[color, background-color, border-color, font-weight], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false}]
   selector-attribute-name-disallowed-list: null
   selector-attribute-operator-allowed-list: null
   selector-attribute-operator-disallowed-list: null
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 740b39dbd5f8..292a7dd2bd33 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -97,7 +97,7 @@
 											{{svg "octicon-chevron-down" 18}}
 										{{end}}
 									</button>
-									<div class="gt-bold gt-df gt-ac gt-mono">
+									<div class="gt-font-semibold gt-df gt-ac gt-mono">
 										{{if $file.IsBin}}
 											<span class="gt-ml-1 gt-mr-3">
 												{{$.locale.Tr "repo.diff.bin"}}
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index f30126153307..50f0c903aefe 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -11,7 +11,7 @@
 		<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
 			<div class="comment-header-left gt-df gt-ac">
 				{{if .OriginalAuthor}}
-					<span class="text black gt-bold gt-mr-2">
+					<span class="text black gt-font-semibold gt-mr-2">
 						{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
 						{{.OriginalAuthor}}
 					</span>
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index c54b29dcd648..3c60eca671dc 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -23,7 +23,7 @@
 					<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
 						<div class="comment-header-left gt-df gt-ac">
 							{{if .Issue.OriginalAuthor}}
-								<span class="text black gt-bold">
+								<span class="text black gt-font-semibold">
 									{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
 									{{.Issue.OriginalAuthor}}
 								</span>
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 32ce8bad9476..b65ebc68a24f 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -27,7 +27,7 @@
 					<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
 						<div class="comment-header-left gt-df gt-ac">
 							{{if .OriginalAuthor}}
-								<span class="text black gt-bold gt-mr-2">
+								<span class="text black gt-font-semibold gt-mr-2">
 									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 									{{.OriginalAuthor}}
 								</span>
@@ -420,7 +420,7 @@
 								{{end}}
 								<span class="text grey muted-links">
 									{{if .OriginalAuthor}}
-										<span class="text black gt-bold">
+										<span class="text black gt-font-semibold">
 											{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 											{{.OriginalAuthor}}
 										</span>
@@ -548,7 +548,7 @@
 																{{end}}
 																<span class="text grey muted-links">
 																	{{if .OriginalAuthor}}
-																		<span class="text black gt-bold">
+																		<span class="text black gt-font-semibold">
 																			{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 																			{{.OriginalAuthor}}
 																		</span>
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index def6beccb9d9..bfe5a20b164d 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -28,7 +28,7 @@
 			{{range .LanguageStats}}
 			<div class="item gt-df gt-ac gt-jc">
 				<i class="color-icon gt-mr-3" style="background-color: {{.Color}}"></i>
-				<span class="gt-bold gt-mr-3">
+				<span class="gt-font-semibold gt-mr-3">
 					{{if eq .Language "other"}}
 						{{$.locale.Tr "repo.language_other"}}
 					{{else}}
diff --git a/templates/shared/user/authorlink.tmpl b/templates/shared/user/authorlink.tmpl
index 4e45fdfd0f2f..71cbb8676e68 100644
--- a/templates/shared/user/authorlink.tmpl
+++ b/templates/shared/user/authorlink.tmpl
@@ -1 +1 @@
-<a class="author text black gt-bold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
+<a class="author text black gt-font-semibold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
diff --git a/templates/user/settings/account.tmpl b/templates/user/settings/account.tmpl
index 451b0ca0e008..97c35fc7dc96 100644
--- a/templates/user/settings/account.tmpl
+++ b/templates/user/settings/account.tmpl
@@ -137,7 +137,7 @@
 			<div class="ui red message">
 				<p class="text left">{{svg "octicon-alert"}} {{.locale.Tr "settings.delete_prompt" | Str2html}}</p>
 				{{if .UserDeleteWithComments}}
-				<p class="text left" style="font-weight: bold;">{{.locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime | Str2html}}</p>
+				<p class="text left gt-font-semibold">{{.locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime | Str2html}}</p>
 				{{end}}
 			</div>
 			<form class="ui form ignore-dirty" id="delete-form" action="{{AppSubUrl}}/user/settings/account/delete" method="post">
diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index e7dc2ec53374..617462542a33 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -32,7 +32,7 @@
 }
 
 .admin dl.admin-dl-horizontal dt {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   width: 220px;
   margin-right: 5px;
   overflow: hidden;
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 6c6c5381ad73..eb12ffef7a6c 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -3,10 +3,11 @@
   --fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
   --fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
   --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
-  /* "font-weight: bold" starts from 700, some fonts do not provide "bolding" for weight 600. */
-  /* But some users consider "700" is too heavy, so use 601, which is when Segoe UI on Linux */
-  /* starts bolding. */
-  --font-weight-bold: 601;
+  /* font weights - use between 400 and 600 for general purposes */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
   /* backgrounds */
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
@@ -218,7 +219,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 body {
@@ -891,7 +892,7 @@ a.label,
 .ui.dropdown .menu .active.item {
   color: var(--color-text);
   background: var(--color-active);
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 /* fix misaligned images in webhook dropdown */
@@ -1436,7 +1437,7 @@ img.ui.avatar,
 }
 
 .ui.form .ui.button {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .ui.floating.label {
@@ -1494,7 +1495,7 @@ img.ui.avatar,
 }
 
 .ui .text.normal {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .ui .text.italic {
@@ -1509,7 +1510,7 @@ img.ui.avatar,
 }
 
 .ui .text.thin {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .ui .text.middle {
@@ -1546,7 +1547,7 @@ img.ui.avatar,
 }
 
 .ui .normal.header {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .ui .form .autofill-dummy {
@@ -1565,7 +1566,7 @@ img.ui.avatar,
   font-family: var(--fonts-monospace);
   font-size: 13px;
   padding: 6px 10px 4px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   margin: 0 6px;
 }
 
@@ -1592,7 +1593,7 @@ img.ui.avatar,
 
 .ui.inline.delete-button {
   padding: 8px 15px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .ui .background.red {
@@ -1736,7 +1737,7 @@ img.ui.avatar,
 }
 
 .scrolling.menu .item.selected {
-  font-weight: var(--font-weight-bold) !important;
+  font-weight: var(--font-weight-semibold) !important;
 }
 
 .ui.dropdown .scrolling.menu {
@@ -2486,7 +2487,7 @@ a.ui.basic.label:hover {
 
 .ui.attached.header .right .button {
   padding: 8px 10px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 /* reduce height of buttons with dropdown icon */
@@ -2534,7 +2535,7 @@ a.ui.basic.label:hover {
   padding: 2.75px;
   border-radius: 1em;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   line-height: .67em;
 }
 
@@ -2614,7 +2615,7 @@ table th[data-sortt-desc] .svg {
   font-size: 1.25em;
   line-height: 1;
   font-style: normal !important;
-  font-weight: normal !important;
+  font-weight: var(--font-weight-normal) !important;
   vertical-align: -0.075em;
 }
 
@@ -2721,7 +2722,7 @@ table th[data-sortt-desc] .svg {
 .ellipsis-button {
   padding: 0 5px 8px !important;
   display: inline-block !important;
-  font-weight: var(--font-weight-bold) !important;
+  font-weight: var(--font-weight-semibold) !important;
   line-height: 6px !important;
   vertical-align: middle !important;
 }
diff --git a/web_src/css/chroma/base.css b/web_src/css/chroma/base.css
index f1db1993fefe..26d128775f0a 100644
--- a/web_src/css/chroma/base.css
+++ b/web_src/css/chroma/base.css
@@ -41,7 +41,7 @@
 
 /* GenericStrong */
 .chroma .gs {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* GenericUnderline */
diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css
index eb5c5d13b8c5..cfdf074f8edf 100644
--- a/web_src/css/editor/combomarkdowneditor.css
+++ b/web_src/css/editor/combomarkdowneditor.css
@@ -91,7 +91,7 @@ text-expander .suggestions li {
   align-items: center;
   cursor: pointer;
   padding: 4px 8px;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }
 
 text-expander .suggestions li + li {
@@ -115,7 +115,7 @@ text-expander .suggestions li:hover {
 }
 
 text-expander .suggestions .fullname {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   margin-left: 4px;
   color: var(--color-text-light-1);
 }
diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css
index 244ec5a96f53..85d04575d968 100644
--- a/web_src/css/features/imagediff.css
+++ b/web_src/css/features/imagediff.css
@@ -26,7 +26,7 @@
 }
 
 .image-diff-container .diff-side-by-side .side .side-header {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 .image-diff-container .diff-swipe {
diff --git a/web_src/css/features/tribute.css b/web_src/css/features/tribute.css
index b7b0a255092c..76e3138b65e6 100644
--- a/web_src/css/features/tribute.css
+++ b/web_src/css/features/tribute.css
@@ -15,7 +15,7 @@
 }
 
 .tribute-container li span.fullname {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   font-size: 0.8rem;
   margin-left: 3px;
 }
diff --git a/web_src/css/font_i18n.css b/web_src/css/font_i18n.css
index e3de90653202..187fa292c760 100644
--- a/web_src/css/font_i18n.css
+++ b/web_src/css/font_i18n.css
@@ -51,7 +51,7 @@
     local("SourceHanSans-Light"), local("Yu Gothic Regular"),
     local("YuGothic Regular"), local("Droid Sans Japanese"), local("Meiryo"),
     local("MS PGothic");
-  font-weight: 300;
+  font-weight: var(--font-weight-light);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -66,7 +66,7 @@
     local("SourceHanSans-Regular"), local("Yu Gothic Medium"),
     local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
     local("MS PGothic");
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -81,7 +81,7 @@
     local("SourceHanSans-Medium"), local("Yu Gothic Medium"),
     local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
     local("MS PGothic");
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -95,7 +95,7 @@
     local("NotoSansCJKJP-Bold"), local("Source Han Sans Bold"),
     local("SourceHanSans-Bold"), local("Yu Gothic Bold"), local("YuGothic Bold"),
     local("Droid Sans Japanese"), local("Meiryo Bold"), local("MS PGothic");
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -124,7 +124,7 @@
     local("NotoSansCJKSC-Light"), local("HiraginoSansGB-W3"),
     local("Hiragino Sans GB W3"), local("Microsoft YaHei Light"),
     local("Heiti SC Light"), local("SimHei");
-  font-weight: 300;
+  font-weight: var(--font-weight-light);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -137,7 +137,7 @@
     local("NotoSansCJKSC-Regular"), local("HiraginoSansGB-W3"),
     local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
     local("Heiti SC Light"), local("SimHei");
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -150,7 +150,7 @@
     local("NotoSansCJKSC-Medium"), local("HiraginoSansGB-W3"),
     local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
     local("Heiti SC Light"), local("SimHei");
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -163,7 +163,7 @@
     local("NotoSansCJKSC-Bold"), local("HiraginoSansGB-W6"),
     local("Hiragino Sans GB W6"), local("Microsoft YaHei Bold"),
     local("Heiti SC Medium"), local("SimHei");
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -192,7 +192,7 @@
     local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
     local("Heiti TC Light"), local("PMingLiU");
-  font-weight: 300;
+  font-weight: var(--font-weight-light);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -205,7 +205,7 @@
     local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU");
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -218,7 +218,7 @@
     local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU");
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -231,7 +231,7 @@
     local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
     local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
     local("Heiti TC Medium"), local("PMingLiU");
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -262,7 +262,7 @@
     local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
     local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 300;
+  font-weight: var(--font-weight-light);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -277,7 +277,7 @@
     local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -292,7 +292,7 @@
     local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -307,7 +307,7 @@
     local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
     local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
     local("Heiti TC Medium"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -335,7 +335,7 @@
     local("SourceHanSansK-Light"), local("Noto Sans CJK KR Light"),
     local("NotoSansCJKKR-Light"), local("NanumBarunGothic Light"),
     local("Malgun Gothic Semilight"), local("Nanum Gothic"), local("Dotum");
-  font-weight: 300;
+  font-weight: var(--font-weight-light);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -347,7 +347,7 @@
     local("SourceHanSansK-Regular"), local("Noto Sans CJK KR Regular"),
     local("NotoSansCJKKR-Regular"), local("NanumBarunGothic"),
     local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -359,7 +359,7 @@
     local("SourceHanSansK-Medium"), local("Noto Sans CJK KR Medium"),
     local("NotoSansCJKKR-Medium"), local("NanumBarunGothic"),
     local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -371,7 +371,7 @@
     local("SourceHanSansK-Bold"), local("Noto Sans CJK KR Bold"),
     local("NotoSansCJKKR-Bold"), local("NanumBarunGothic Bold"),
     local("Malgun Gothic Bold"), local("Nanum Gothic Bold"), local("Dotum");
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index d84fd4ba80c0..a415670afea5 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -29,8 +29,6 @@ Gitea's private styles use `g-` prefix.
   font-size: .95em !important; /* compensate for monospace fonts being usually slightly larger */
 }
 
-.gt-bold { font-weight: var(--font-weight-bold) !important; }
-
 .gt-word-break {
   word-wrap: break-word !important;
   word-break: break-word; /* compat: Safari */
@@ -86,6 +84,11 @@ Gitea's private styles use `g-` prefix.
 .gt-float-left { float: left !important; }
 .gt-float-right { float: right !important; }
 
+.gt-font-light { font-weight: var(--font-weight-light) !important };
+.gt-font-normal { font-weight: var(--font-weight-normal) !important };
+.gt-font-medium { font-weight: var(--font-weight-medium) !important };
+.gt-font-semibold { font-weight: var(--font-weight-semibold) !important };
+
 .gt-rounded { border-radius: var(--border-radius) !important; }
 .gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
 .gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
diff --git a/web_src/css/install.css b/web_src/css/install.css
index d99805b80f42..a65a213fd5e2 100644
--- a/web_src/css/install.css
+++ b/web_src/css/install.css
@@ -55,7 +55,7 @@
   margin: 20px auto;
   color: var(--color-red);
   text-align: left;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 .page-content.install .ui .reinstall-confirm {
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index fb1e8ea6300e..e300995b31fe 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -74,7 +74,7 @@
 .markup h6 {
   margin-top: 24px;
   margin-bottom: 16px;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   line-height: 1.25;
 }
 
@@ -252,7 +252,7 @@
   margin-top: 16px;
   font-size: 1em;
   font-style: italic;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 .markup dl dd {
@@ -284,7 +284,7 @@
 }
 
 .markup table th {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 .markup table th,
diff --git a/web_src/css/modules/card.css b/web_src/css/modules/card.css
index c0f7e83037ca..eba14ab334be 100644
--- a/web_src/css/modules/card.css
+++ b/web_src/css/modules/card.css
@@ -56,7 +56,7 @@
 
 .ui.cards > .card > .content > .header:not(.ui),
 .ui.card > .content > .header:not(.ui) {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   font-size: 1.28571429em;
   margin-top: -.21425em;
   line-height: 1.28571429em;
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
index 5a90c0852f68..ae50bce0ed25 100644
--- a/web_src/css/modules/comment.css
+++ b/web_src/css/modules/comment.css
@@ -61,7 +61,7 @@
 
 .ui.comments .comment .author {
   font-size: 1em;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }
 
 .ui.comments .comment a.author {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index ddcc258be971..dbf9bf79bd56 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -230,7 +230,7 @@
 .repository.file.list #repo-files-table thead th {
   padding-top: 8px;
   padding-bottom: 5px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .repository.file.list #repo-files-table thead .ui.avatar {
@@ -627,7 +627,7 @@
   align-items: center;
   flex: 1;
   width: 100%;
-  font-weight: 300;
+  font-weight: var(--font-weight-normal);
   font-size: 32px;
   line-height: 40px;
   margin: 0;
@@ -1305,7 +1305,7 @@
 }
 
 .repository.commits .header .search input {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   padding: 5px 10px;
 }
 
@@ -1533,7 +1533,7 @@
 }
 
 .repository .data-table th {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   background: var(--color-box-header);
   border-top: 0;
 }
@@ -1880,7 +1880,7 @@
 }
 
 .repository.quickstart .guide .item small {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .repository.quickstart .guide .clone.button:first-child {
@@ -1991,7 +1991,7 @@
 }
 
 .repository.settings.branches .branch-protection .status-check-matched-mark {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   font-style: italic;
 }
 
@@ -2185,7 +2185,7 @@
   border-radius: 0;
   margin: 0;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   border-color: var(--color-secondary) !important;
   background: var(--color-reaction-bg);
 }
@@ -2347,7 +2347,7 @@
 .user-cards .list .item .name {
   margin-top: 0;
   margin-bottom: 0;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .user-cards .list .item .meta {
@@ -2465,7 +2465,7 @@
   border: none !important;
   background: var(--color-box-header);
   border-bottom: 1px solid var(--color-secondary) !important;
-  font-weight: normal !important;
+  font-weight: var(--font-weight-normal) !important;
   padding: 0.5rem 1rem;
   margin: 0 !important;
   position: relative;
@@ -2828,7 +2828,7 @@ tbody.commit-list {
 }
 
 #repo-topics .repo-topic {
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   cursor: pointer;
   margin: 2px;
 }
@@ -2933,7 +2933,7 @@ tbody.commit-list {
 }
 
 .resolved-placeholder {
-  font-weight: normal !important;
+  font-weight: var(--font-weight-normal) !important;
   border: 1px solid var(--color-secondary) !important;
   border-radius: var(--border-radius) !important;
   margin: 4px !important;
diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
index 700ac46c210a..e786e5ff5953 100644
--- a/web_src/css/repo/release-tag.css
+++ b/web_src/css/repo/release-tag.css
@@ -6,7 +6,7 @@
 
 .repository.releases #release-list .release-list-title {
   font-size: 2rem;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
   margin-top: -4px;
   margin-bottom: 0;
 }
@@ -87,7 +87,7 @@
 
 .repository.tags #tags-table .release-tag-name {
   font-size: 18px;
-  font-weight: normal;
+  font-weight: var(--font-weight-normal);
 }
 
 .repository.new.release .target {
diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css
index db0d4cfbb9ad..89e1135ce987 100644
--- a/web_src/css/shared/issuelist.css
+++ b/web_src/css/shared/issuelist.css
@@ -33,7 +33,7 @@
   color: var(--color-text);
   font-size: 16px;
   min-width: 0;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 .issue.list > .item .issue-item-top-row a.index {
diff --git a/web_src/css/user.css b/web_src/css/user.css
index a7106599dfe7..252e595f3bf1 100644
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -1,6 +1,6 @@
 .user.profile .ui.card .header {
   display: block;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   font-size: 1.3rem;
   margin-top: -0.2rem;
   line-height: 1.3rem;
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index a434eee436e7..0fd22ca9b69c 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -74,7 +74,7 @@
             <a class="repo-list-link muted gt-df gt-ac gt-sb" :href="repo.link">
               <div class="item-name gt-df gt-ac gt-f1">
                 <svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
-                <div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div>
+                <div class="text gt-font-semibold truncate gt-ml-1">{{ repo.full_name }}</div>
                 <span v-if="repo.archived">
                   <svg-icon name="octicon-archive" :size="16" class-name="gt-ml-2"/>
                 </span>
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index 780f5e6c2852..8ab76168921a 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@@ -1,7 +1,7 @@
 <template>
   <ol class="diff-detail-box diff-stats gt-m-0" ref="root" v-if="fileListIsVisible">
     <li v-for="file in files" :key="file.NameHash">
-      <div class="gt-bold gt-df gt-ac pull-right">
+      <div class="gt-font-semibold gt-df gt-ac pull-right">
         <span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ binaryFileMessage }}</span>
         {{ file.IsBin ? '' : file.Addition + file.Deletion }}
         <span v-if="!file.IsBin" class="diff-stats-bar gt-mx-3" :data-tooltip-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">