I recently came across a Korean font called Spoqa Han Sans. It attracted me due to its simplicity and readability. However, I didn't like its English glyph (based on Noto Sans, which I didn't love to death as well.)

After a while, I figured how to define a language range for each font. While importing a font face, we need to add unicode-range.

@font-face {
  font-family: 'Spoqa Han Sans';

  /* Omitted */

  unicode-range: U+AC00-D7AF;
}

U+AC00-D7AFis the unicode range of Korean glyphs.

Can't find @font-face?

In most cases, we add either of the following statements to define a font.

<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css' rel='stylesheet' type='text/css'>
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);

This way has an advantage that I do not need to care about updating the font. It automatically updates when the font is updated at the font server (Of course, this could also be a disadvantage in some cases). But we cannot define unicode-range in this case. So rather than importing the scripts like above, we could copy & paste the actual script itself. Access the URL provided in your @import statement with https: in front of it, and you will find the license of the font and its @font-face statements.

Copy this value and add them to your CSS, then define the unicode-range. Note that this method will not automatically update your font, but you can always recopy & repaste when the @font-face in your @font-face gets updated.

You’ve successfully subscribed to Sunghyun Cho
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.