DEV Community

Gunnwook Ahn
Gunnwook Ahn

Posted on • Originally published at ahndev.com

Building Sleek Korean Web Pages Using ONLY System Fonts (No Web Fonts!)

#webdev #css #korean

Unlike English web fonts, Korean web fonts are notoriously heavy because they need to contain anywhere from 2,350 to 11,172 characters. Even with aggressive compression (like WOFF2 Subsets), they can heavily impact performance, causing text rendering delays (FOIT) or layout shifts (CLS) on slower networks.

Inspired by modernfontstacks.com, I realized that we can build beautiful, blazing-fast web pages by smartly combining the pre-installed system fonts of major OS environments (Windows, Mac, iOS, Android) without downloading any external files.

Here is my curated list of Korean font stacks tailored for different design styles.

1. System UI (Standard Sans-Serif)

These are default sans-serif fonts optimized by each OS for maximum screen readability. Since no font files are downloaded, pages load instantly with zero FOIT.

font-family:
  -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic',
  '맑은 고딕', Dotum, 돋움, sans-serif;
Enter fullscreen mode Exit fullscreen mode

  • Mac / iOS: Apple SD Gothic Neo takes priority, rendering clean and crisp typography.

  • Windows: Malgun Gothic (맑은 고딕), the clean standard Windows font, is applied.

  • Android: Automatically maps to the system's default sans-serif (Noto Sans-based).

  • Legacy Devices: For older Windows versions without Malgun Gothic, it falls back to Dotum (돋움), a clean fixed-width legacy gothic font.

2. Neo-Grotesque / Geometric (Modern Sans-Serif)

Great for large titles, banners, or brand landing pages where you want a more modern, neutral, and structural sans-serif feel rather than body text.

font-family:
  Helvetica, 'Apple SD Gothic Neo', 'Segoe UI', 'Malgun Gothic', '맑은 고딕',
  sans-serif;
Enter fullscreen mode Exit fullscreen mode

How it works: By placing Helvetica or Segoe UI at the front, English characters and numbers render in a sleek, geometric typeface. Since these fonts don't contain Korean glyphs, the browser automatically falls back to Apple SD Gothic Neo or Malgun Gothic for Korean text.

3. Classic Serif / Old Style (Traditional Myeongjo)

A traditional serif font stack that provides a comfortable reading experience, resembling a printed book. Recommended for long-form reading such as blog posts, news articles, or columns.

font-family: 'AppleMyungjo', 'Apple 명조', 'Batang', '바탕', serif;
Enter fullscreen mode Exit fullscreen mode

  • Mac / iOS: Applies AppleMyungjo, which offers excellent readability on Retina displays.

  • Windows: Applies Batang (바탕), the most ubiquitous default serif font on Windows.

4. Modern Serif / Transitional (New Myeongjo)

A modern, refined serif stack that feels sharper than traditional Myeongjo fonts. It targets "New Batang" for a cleaner appearance on Windows screens.

font-family:
  'Chosunilbo_myungjo', '조선일보명조', 'New Batang', '새바탕', Georgia, serif;
Enter fullscreen mode Exit fullscreen mode

How it works: If a user has office suites installed, the high-quality Chosunilbo_myungjo triggers first. Otherwise, it renders in New Batang (새바탕), which has improved screen readability over classic Batang. English is handled by the elegant Georgia typeface.

5. Monospace Code (Fixed-Width)

A fixed-width font stack for code blocks, tables, or data screens where exact alignment of text columns is crucial. It keeps English, numbers, and Korean characters nicely balanced.

font-family:
  ui-monospace, SFMono-Regular, Consolas, 'GulimChe', '굴림체', monospace;
Enter fullscreen mode Exit fullscreen mode

  • Mac: ui-monospace and SFMono trigger, providing Apple's beautiful developer environment typography.

  • Windows: The built-in English monospace font Consolas handles alphanumerics, while the Korean monospace font GulimChe (굴림체) handles Korean characters.

6. Handwritten / Casual

For an organic, warm, or slightly playful handwritten feel, breaking away from rigid gothic and serif styles.

font-family: 'Apple Chancery', 'GungsuhChe', '궁서체', casual, cursive;
Enter fullscreen mode Exit fullscreen mode

Windows: Calls GungsuhChe (궁서체), which brings out a traditional brush-calligraphy aesthetic.

Android: Declaring the casual property automatically maps to the friendly, informal system handwriting font built into mobile devices.

System Emojis

You can also append system emoji fonts at the end of your stack:

font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
Enter fullscreen mode Exit fullscreen mode

🔗 Open Source

You can find the repository and contribute here:

👉 GitHub: modern-hangul-font-stacks
This article was originally published on my personal blog:
👉 Original Post: https://ahndev.com/building-sleek-korean-web-pages-using-only-system-fonts-no-web-fonts/

Top comments (0)