diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index 00ed675e2d5..a07a63b11ea 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -59,7 +59,7 @@
 }
 
 .admin dl.admin-dl-horizontal dt {
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
   float: left;
   width: 285px;
   clear: left;
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 1f674df9a55..d1b322d527c 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -3,6 +3,10 @@
   --fonts-proportional: -apple-system, "Segoe UI", system-ui, "Roboto", "Helvetica Neue", "Arial";
   --fonts-monospace: "SFMono-Regular", "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;
   /* 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>');
@@ -211,7 +215,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
 }
 
 body {
@@ -1792,7 +1796,7 @@ img.ui.avatar,
 }
 
 .scrolling.menu .item.selected {
-  font-weight: 600 !important;
+  font-weight: var(--font-weight-bold) !important;
 }
 
 .ui.dropdown .scrolling.menu {
@@ -2787,7 +2791,7 @@ table th[data-sortt-desc] .svg {
 .ellipsis-button {
   padding: 0 5px 8px !important;
   display: inline-block !important;
-  font-weight: 600 !important;
+  font-weight: var(--font-weight-bold) !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 bfd49db7a43..f1db1993fef 100644
--- a/web_src/css/chroma/base.css
+++ b/web_src/css/chroma/base.css
@@ -41,7 +41,7 @@
 
 /* GenericStrong */
 .chroma .gs {
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
 }
 
 /* GenericUnderline */
diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css
index f796bc19aea..244ec5a96f5 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: bold;
+  font-weight: var(--font-weight-bold);
 }
 
 .image-diff-container .diff-swipe {
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 1c02de2d7a0..4be20d640cf 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -29,7 +29,7 @@
   font-size: .9em !important; /* compensate for monospace fonts being usually slightly larger */
 }
 
-.gt-bold { font-weight: 600 !important; }
+.gt-bold { font-weight: var(--font-weight-bold) !important; }
 
 .gt-word-break {
   word-wrap: break-word !important;
diff --git a/web_src/css/install.css b/web_src/css/install.css
index b936ba66fd6..d99805b80f4 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: bold;
+  font-weight: var(--font-weight-bold);
 }
 
 .page-content.install .ui .reinstall-confirm {
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index 96ef5bde121..5246ed5eeb3 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -78,7 +78,7 @@
 .markup h6 {
   margin-top: 24px;
   margin-bottom: 16px;
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
   line-height: 1.25;
 }
 
@@ -256,7 +256,7 @@
   margin-top: 16px;
   font-size: 1em;
   font-style: italic;
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
 }
 
 .markup dl dd {
@@ -288,7 +288,7 @@
 }
 
 .markup table th {
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
 }
 
 .markup table th,
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 0ac254b3715..81b69c07bb1 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -1566,7 +1566,7 @@
 }
 
 .repository .data-table th {
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
   background: var(--color-box-header);
   border-top: 0;
 }
diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css
index 6e2cc737e7d..4c7b912fb0c 100644
--- a/web_src/css/shared/issuelist.css
+++ b/web_src/css/shared/issuelist.css
@@ -37,7 +37,7 @@
   color: var(--color-text);
   font-size: 16px;
   min-width: 0;
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
 }
 
 .issue.list > .item .issue-item-top-row a.index {
diff --git a/web_src/css/user.css b/web_src/css/user.css
index 26d5da476de..b437513f589 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: 600;
+  font-weight: var(--font-weight-bold);
   font-size: 1.3rem;
   margin-top: -0.2rem;
   line-height: 1.3rem;