Search code examples
htmlcssfontstypography

Can I use two different typefaces for Asian characters (korean) and another for roman characters in the same paragraph?


The ask is if we had a single paragraph with both Korean (Hangul) characters and Roman characters. Is there a way in CSS to have the Hangul characters be a certain typeface while the Roman characters use another typeface?

For example I would like to use Noto Sans KR for Hangul and Helvetica for Roman characters. How would this CSS look?

Is there a similar function for Chinese and Japanese?

EDIT: the text is interwoven of roman letters/words and hangul (korean). So separating them out wouldn't work.


Solution

  • Same as any other content: use a CSS font-family with a logical fallback order. Make sure to list the roman typeface(s) first, which won't work for Korean, and then you list the korean one(s) after, so they'll kick in for Korean text in the same text block:

    @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css); 
    
    p {/*
        Order matters: roman first, which doesn't have hangul support, and
        so will kick in for the English text, but will fall through to the
        next font when there are "letters" that don't exist in the font.
        Then you follow up with a Korean typeface, and now you have a
        font stack for styling the two scripts in their respective typefaces.
      */
      font-family: Times, 'Jeju Myeongjo', serif;
    }
    p:nth-child(2) { font-family: Times, serif; }
    p:nth-child(3) { font-family: 'Jeju Myeongjo', serif; }
    <p>This is a paragraph with 한국어, also known as 조선말.</p>
    <p>This is a paragraph with 한국어, also known as 조선말 (purely Times).</p>
    <p>This is a paragraph with 한국어, also known as 조선말 (purely Jeju Myeongjo).</p>

    As you can see, the paragraph with font fallback renders the English parts using a roman typeface, and the Korean parts using a korean typeface.

    (To make this extra clear, the second paragraph only uses Times - you can see the Korean does not match the mixed family paragraph. The second one only uses Jeju Myeongjo, and in that paragraph the English does not match the mixed family paragraph).