구글 웹폰트 한자漢字 Chinese Font 설정

이 글은 각 브라우저마다 다르게 보일 가능성이 높습니다. 모바일 환경에서는 기본 서체에 내용만 보이는 밋밋한 포스트 되겠습니다.

 
 

구글 웹폰트를 불러오는 방법은 여타 다른 블로그에도 많기 때문에, 이 포스트에서는 생략하고(언젠가 정리할 날이 올겁니다 ㅎ) 제가 필요로 했던 한자 Chinese Alphabet의 구글 웹폰트 불러오는 방법을 적겠습니다.

구글 웹폰트는 다양한 라틴 알파벳 및 각 국, 각 문명의 폰트를 제공합니다. 한글도 있고, 가나(일본 알파벳), 히브리, 타밀, 라오, 타이 알파벳 등 웬만한 종류의 알파벳이 있는 것 같습니다. 이 모든 것은 '구글 웹폰트 얼리액세스페이지 (http://www.google.com/fonts/earlyaccess)'에 나와있구요. 단, '구글 웹폰트 얼리액세스 페이지'의 단점은 서체의 모양을 확인 할 수 없다는 점입니다.


이 블로그에서 쓰이는 제목 Title의 서체는 제주 고딕체입니다. 그런데 이 서체의 최대 단점은 한자를 지원하지 않는다는 겁니다. 나눔고딕이 좋은 서체이긴하지만 너무 흔하게 쓰이는 감이 있어서 점점 기피하게 되더라죠... 적어도 제목만큼은 다른 서체를 사용하려 제주 고딕을 선택했는데 한자가 없다니;;; 때문에 나눔고딕으로 다시 돌아가야 하나 고민했습니다.
그런데 작업을 해나가면서 살펴보니 HTML 구문의 폰트 스타일은 이 세계의 공용어인 라틴 문자 외에 다른 언어의 알파벳은 그 알파벳을  표기할 수 있는 서체가 있는가 하면, 그렇지 않은 서체가 있기 때문에 겹쳐서(?) 사용 가능한 것 같습니다. 예를 들어 폰트 스타일 구문에 'A'라는 한자 서체 Chinese Alphabet와 'B'라는 한글 서체 Korean Alphabet를 순서대로 배치할 경우 A서체의 한자가 우선 순위로 읽히고, B서체의 한글이 다음 순위로 읽히는 구조입니다. 보통 한글 서체는 모두 한자와 라틴자를 포함하는 구조이기 때문에 한자 서체 보다 앞에 배치하면 제주 고딕의 경우 한자의 자리가 공백으로 표시됩니다. 반대로 한자 서체는 한글을 포함하지 않기 때문에 공백으로 표시되는 것이 아니라 아예 다음에 배치되는 서체의 것을 불러들이는 역할을 하는 것 같습니다.

아무튼... 위와 같은 상황을 정리하자면 아래와 같은 배열이 됩니다.
 

<style="font-family: '한자 서체', '한글 서체';">

저의 경우 한자는 cwTeXHei 서체를, 한글은 제주 고딕을 쓰기 때문에 다음과 같이 적습니다.
 

<style="font-family: 'cwTeXHei', 'Jeju gothic';">

 
 

漢字와 한글
제주고딕체와 cwTeXHei체의 공존

 
위의 문장에 해당하는 html구문은 다음과 같습니다.
 

<span style="FONT-FAMILY: 'cwTeXHei', 'Jeju gothic';"> 

 
위에서 언급한 것과 달리, 제주고딕을 먼저, cwTeXHei체를 나중에 쓰면 아래와 같은 결과를 얻습니다. 한자 부분이 비어보이죠.
 

漢字와 한글
제주고딕체와 cwTeXHei체의 공존

 
아래는 현재 (2015년 4월) 지원되는 웹폰트만 적용시킨 구문입니다. 한자만 서체를 지원하고, 나머지는 별도설정없이 기본 서체를 적용해서 보여집니다. 때문에 한자서체를 먼저 불러들이고 다른 서체가 뒤따라 불러져오는 구조가 구현되는 것 같습니다.
 

漢字와 한글 Latin Alphabet
cwTeXHei체만 입력

漢字와 한글 Latin Alphabet
cwTeXFangSong체만 입력

漢字와 한글 Latin Alphabet
cwTeXKai체만 입력

漢字와 한글 Latin Alphabet
cwTeXMing체만 입력

漢字와 한글 Latin Alphabet
cwTeXYen체만 입력

 

 

언급했듯이 얼리액세스 페이지는 서체의 모양을 보여주지 않습니다;;; 아래 다섯줄의 한자 구문이 2015년 4월 현재 등록되어 있는 5종의 서체 cwTeXFangSong, cwTeXHei, cwTeXKai, cwTeXMing, cwTeXYen 를 순서대로 적용한 내용입니다. 중국어(간체)를 위해 만들어진 폰트인지라 중간중간 튀는(?) 서체가 보이네요(특히 위爲를 튕기는 듯한 느낌이 듭니다). 구글 웹폰트의 한자를 이용하실 분들이 참고하시면 좋을 것 같습니다.

昔者 莊周夢爲蝴蝶 
栩栩然蝴蝶也 自喩適志與 不知周也 
俄然覺 則蘧蘧然周也 
不知周之夢爲蝴蝶與 蝴蝶之夢爲周與 
周與蝴蝶 則必有分矣 此之謂物化

위는 HTML코드로 작업된 내용, 아래는 포토샵에서 서체 배열 순서를 같게해서 작업한 그림파일

폰트를 적용할 때는 여타 다른 구글 웹폰트 적용하듯이 적용하시면 됩니다. 그래도 이렇게 끝내면 섭섭하니, link 태그와 css 코드를 넣고 이만 마치겠습니다. 마찬가지로 cwTeXFangSong, cwTeXHei, cwTeXKai, cwTeXMing, cwTeXYen 서체 순입니다. 웹페이지에 직접 적용하실 때는 위의 것을, css에서 읽어들일때는 아래것을 이용하시면 됩니다.

** 노파심에 드리는 말씀이지만, 이 모든 서체를 다 불러오면 페이지가 엄청 느려집니다;;; 웹폰트는 적당히 쓰는게 최고입니다.

 
 

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css">
@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/cwtexhei.css">
@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/cwtexkai.css">
@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/cwtexming.css">
@import url(http://fonts.googleapis.com/earlyaccess/cwtexming.css);

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/cwtexyen.css">
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);