fix(website): use Noto Sans KR for Korean text (#3821)

Co-authored-by: Kaoru0822 <208281322+kaoru0822-kitauji@users.noreply.github.com>

scripts/test-website.py

@@ -13,6 +13,7 @@ import unittest
 from unittest.mock import patch
 from http.server import ThreadingHTTPServer
 from urllib.error import HTTPError
+from urllib.parse import urlsplit
 from urllib.request import urlopen
 import xml.etree.ElementTree as ET
 
@@ -561,6 +562,15 @@ class WebsiteTranslationChecks(unittest.TestCase):
                     parser = VERIFY.HtmlReferences()
                     parser.feed(translated)
                     self.assertEqual(parser.lang, "en" if parser.translation_fallback else code)
+                    font_stylesheets = [
+                        node.attrs["href"] for node in Document(translated).nodes
+                        if node.tag == "link" and node.attrs.get("rel") == "stylesheet"
+                        and urlsplit(node.attrs.get("href", "")).netloc == "fonts.googleapis.com"
+                    ]
+                    self.assertEqual(len(font_stylesheets), int(parser.lang == "ko"))
+                    if font_stylesheets:
+                        self.assertIn("family=Noto+Sans+KR:wght@100..900", font_stylesheets[0])
+                        self.assertIn("&display=swap", font_stylesheets[0])
                     if code != "en" and not parser.translation_fallback:
                         self.assertEqual(parser.direction, language["dir"])
                     if parser.translation_fallback:

scripts/website_i18n.py

@@ -545,7 +545,13 @@ def render_page(root, source_path, language, messages, available, figures, page_
     source = replace_language_markup(source, root, relative, code, page_languages)
     runtime = {text: messages[("runtime", text)] for text in read_runtime(root, source_path)}
     payload = json.dumps(runtime, ensure_ascii=False).replace("<", "\\u003c").replace("&", "\\u0026")
-    source = source.replace("</head>", f'<script id="website-messages" type="application/json">{payload}</script>\n  </head>')
+    # Only Korean editions request the font stylesheet; English fallbacks keep
+    # their system fonts. The variable face also supplies the site's 650 weight.
+    font_stylesheet = (
+        '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&amp;display=swap" />\n  '
+        if code == "ko" else ""
+    )
+    source = source.replace("</head>", f'{font_stylesheet}<script id="website-messages" type="application/json">{payload}</script>\n  </head>')
     return source
 
 

website/README.md

@@ -14,6 +14,13 @@ downloads and check the site. There is no frontend framework, bundler or npm
 dependency. A build generates all editions in `website/_site/`. The resulting
 files work as ordinary static files; language switching needs no JavaScript.
 
+Korean editions load the variable Noto Sans KR webfont through Google Fonts
+(`fonts.googleapis.com` and `fonts.gstatic.com`) so the preferred Korean font
+does not depend on fonts installed on the reader's PC. Other editions keep
+system fonts. Text remains visible while the font loads (`display=swap`), and
+local Korean fonts are used if Google Fonts is unavailable. The stylesheet is
+added during translation rendering; generated `_site/` pages are not authored.
+
 [style-guide.md](style-guide.md) explains the writing, page structure, figures,
 visual system and review process. Read it before adding or revising a page.
 

website/public/assets/styles.css

@@ -2930,7 +2930,7 @@ html[dir="rtl"] .brand-name {
   }
 }
 
-/* Select local fonts with the appropriate CJK glyph forms. */
+/* Select fonts with the appropriate CJK glyph forms. */
 :lang(ja) {
   --font-sans:
     var(--font-latin), "Hiragino Sans", "Hiragino Kaku Gothic ProN",
@@ -2957,11 +2957,11 @@ html[dir="rtl"] .brand-name {
 }
 :lang(ko) {
   --font-sans:
-    var(--font-latin), "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
-    "Noto Sans CJK KR", sans-serif;
+    "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic",
+    var(--font-latin), sans-serif;
   --font-mono:
-    var(--font-code), "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
-    "Noto Sans CJK KR", monospace;
+    var(--font-code), "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo",
+    "Malgun Gothic", monospace;
 }
 :lang(en) {
   --font-sans: var(--font-latin), sans-serif;

website/style-guide.md

@@ -256,7 +256,9 @@ Embedded SVGs inherit the page's `color-scheme`; canvas demos listen for
 that differs from the system preference.
 
 Use the system sans-serif stack for prose and the shared monospace stack for
-code. The content container is at most 1080px wide, with article text limited to
+code. Korean editions use Noto Sans KR from Google Fonts, with local Korean
+fonts as fallbacks; code retains the shared monospace fonts for Latin glyphs.
+The content container is at most 1080px wide, with article text limited to
 760px. The header has its own 1320px container so navigation and utility controls
 fit together. At 1100px and below, navigation moves to a separate row. Reuse the
 existing heading sizes, line heights, section spacing and component classes.