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

Gunnwook Ahn — Tue, 07 Jul 2026 07:39:57 +0000

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;

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;

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;

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;

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;

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;

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';

🔗 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/

Handling a 14-Hour Timezone Mismatch in NASA's APOD API

Gunnwook Ahn — Sun, 29 Mar 2026 10:23:21 +0000

While building a client-side calendar app using NASA's Astronomy Picture of the Day (APOD) API, I encountered a common but tricky challenge in global web development: timezone inconsistency.

My app was designed to fetch and display the daily space image. Everything worked perfectly during my local development hours in Korea (KST). However, I started seeing undefined errors and broken UI elements specifically during the Korean morning hours.

The Problem: KST vs. EST

After some debugging, I realized the root cause was the time difference.

Client (Me): Korea Standard Time (KST, UTC+9)

API Server (NASA): Eastern Standard Time (EST, UTC-5)

Korea is 14 hours ahead of the US East Coast. When it was, for example, 10:00 AM on March 29th in Korea, it was still 8:00 PM on March 28th at NASA's headquarters.

My initial code was request-driven by the client's local date. When the app requested data for "today" (March 29th KST), the NASA server responded that the data for that date did not exist yet. Trying to access properties of this non-existent data led to the dreaded TypeError: Cannot read properties of undefined.

The Solution: Defensive Programming with data.length
Instead of relying on the client-side date to drive the rendering loop, I refactored the logic to be data-driven. This is a classic example of defensive programming.

Here’s the core of the fix:

// Before (Fragile)
const data = await response.json();
    console.log(data);

    for (let i = 1; i <= todayDate; i++) {
      liTag += createListItem(i, data[i - 1]);
    }

    for (let i = todayDate + 1; i <= lastDateofMonth; i++) {
      liTag += `<li class='grey-text'>${i}</li>`;
    }
}

// After (Robust)
const data = await response.json();
    console.log(data);

    for (let i = 1; i <= data.length; i++) {
      liTag += createListItem(i, data[i - 1]);
    }

    for (let i = data.length + 1; i <= lastDateofMonth; i++) {
      liTag += `<li class='grey-text'>${i}</li>`;
    }

By switching to data.length, the loop automatically stops at the last available data point, completely bypassing the undefined error. Future dates are now handled by a separate loop that renders a clean placeholder, improving the overall User Experience (UX).

Key Takeaways

Never Assume Data Exists: Especially when dealing with external APIs, always validate the data's existence and structure before trying to access its properties.

Timezones Matter: In any global-facing application, always consider the offset between the client and the server.

Data-Driven UI: Designing your UI rendering logic around the actual data received, rather than client-side assumptions, leads to more robust and error-resistant code.

This was a fantastic learning experience that highlighted how a seemingly small detail like a timezone can impact real-world application stability.

DEV Community: Gunnwook Ahn