My Website's Readability is Lacking? Solved with Pretendard Font and Code Line Wrapping (2026)

The website's font felt a bit dull, and I was bothered by text getting cut off in code blocks. This post is a record of how I tackled those two issues back in July 2026.

Attempts and Pitfalls

At first, I thought I could just swap out the font. I started the process of changing from the old, classic Myeongjo typeface to the more modern Pretendard font.

/* Original font settings (example) */
body {
  font-family: 'Nanum Myeongjo', serif;
}

/* Attempting to apply Pretendard font */
body {
  font-family: 'Pretendard', sans-serif;
}

The font itself was fine, but the problem was with the code blocks in my blog posts. Long lines of code were extending beyond the screen and getting cut off.

<pre><code>
// A very long line of code goes here. If this line exceeds the screen width, it will be cut off.
// This problem persisted even after changing to the Pretendard font.
</code></pre>

That's when I started struggling for over three hours. I tried changing the CSS white-space property to pre-wrap, and I fiddled with overflow-wrap, but nothing worked as expected. I initially thought the font change and the code block text clipping were separate issues, but they were intertwined.

The Cause

Ultimately, the problem was a combination of the CSS white-space property setting and the word-break property. white-space: pre-wrap; is supposed to maintain whitespace and line breaks while automatically wrapping long words, but it seemed to conflict with word-break: break-all;, leading to unexpected behavior or situations where neither was properly applied. The Pretendard font itself, with its subtle differences in character spacing and width compared to the previous font, also played a role in affecting the layout.

The Solution

The cleanest solution I found was to set white-space to pre-wrap and adjust word-break to break-word.

/* Blog code block styles */
pre {
  white-space: pre-wrap; /* Preserve whitespace and line breaks, wrap long words automatically */
  word-break: break-word; /* Wrap long words */
  overflow-wrap: break-word; /* Wrap long words (similar to word-break) */
}
/* Overall body font settings */
body {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

I loaded the Pretendard font itself via CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orval/stickers/dist/fonts/pretendard/pretendard.css">

With this setup, even long code lines wrapped naturally, significantly improving readability. I also went through multiple pages to fix minor layout shifts caused by the font change.

Results

• Readability across the website improved noticeably.
• The site looked much more modern and clean thanks to the Pretendard font.
• Text clipping in blog code blocks was almost entirely eliminated.

Takeaways — Don't Fall Into the Same Trap

• [ ] When changing fonts, don't just see it as a design element; consider its impact on overall readability and layout.
• [ ] The text wrapping issue in code blocks is likely solvable with a combination of white-space: pre-wrap; and word-break: break-word;.
• [ ] After changing fonts, always check multiple pages to identify any broken layouts or awkward sections.
• [ ] When loading fonts via CDN, make sure to verify the font file path accurately.