티스토리나 웹페이지에서 원하는 웹폰트 삽입 후 특수문자와 같은 부분은 다른 웹폰트로 적용하고 싶을 수 있습니다. 영어나 일본어처럼 외국어의 경우 한국어 폰트에서는 지원하지 않아 깨져 보이거나 아예 안보이는 경우도 있고, 좀 더 정갈하게 보일 수 있도록 전용 외국어 폰트를 별도로 사용하고 싶을 수 있습니다.
이번 포스팅에서는 웹폰트를 유니코드를 이용하여, 영어, 일본어, 특수문자를 별도로 설정하는 방법을 정리하였습니다.
특수문자 웹폰트 별도로 설정하기
티스토리 무료 스킨 ‘한눈에 스킨’은 기본 폰트로 함렛 폰트가 웹폰트로 사용되고 있습니다. 명조체 폰트입니다.
함렛 폰트를 적용하면 다음과 같이 표시가 됩니다.
‘☞’의 손가락 모양을 티머니 둥근 바람 폰트를 적용하고 싶을 경우 유니코드를 별도로 설정해두면 다음처럼 ‘☞’ 모양이 변경이 됩니다.
이런 방식으로 유니코드 범위를 설정하여 ‘영어’ 또는 ‘일본어’, ‘중국어’와 같이 별도의 유니코드 범위를 다른 폰트로 설정할 수 있습니다.
▼ 티머니 둥근바람 웹폰트로 특수문자 ‘☞’ 만 적용하고, 기본 폰트는 ‘함렛’폰트가 유지된 모습.
▼ 티스토리 스킨 편집 [css]편집에서 본문 font-family를 특수문자 또는 외국어 적용할 폰트를 먼저 입력하고, 그 뒤에 한국어 기본 폰트 순서로 적용합니다.
font-family: 'TmoneyRoundWindRegular', 'Hahmlet-Regular'; /* 특수문자 또는 외국어 적용할 폰트, 기본 폰트 순서 */티머니 둥근 바람의 웹폰트 적용시 unicode-range:에 유니코드를 입력하여 적용할 범위를 설정할 수 있습니다.
@font-face {
font-family: 'TmoneyRoundWindRegular';
src: url('https://tistory1.daumcdn.net/tistory/7057214/skin/images/TmoneyRoundWindRegular.woff') format('woff');
font-weight: normal;
font-style: normal;
unicode-range: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+A2A0-A2E0, U+261E;
}- 한국어 유니코드: U+AC00-D7A3
- 영어 유니코드: U+0041-005A(대문자), U+0061-007A(소문자)
- 일본어 유니코드: U+3041 - U+3096, U+309D, U+309E(히라가나), U+30A1 - U+30FA, U+30FC(가타카나)
- 특수문자 유니코드: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E
- 숫자: U+0030-0039
- 통합 한자: U+4E00 - 9FEA
원하는 유니코드를 찾은 뒤 U+유니코드방식으로 설정하는 것도 가능합니다. ‘☞’의 유니코드는 261E이기 때문에 U+261E으로 unicode-range를 설정하여 적용하였습니다.
라틴어, 러시아어, 그리스어, 아랍어 등 다양한 유니코드 확인은 아래 URL에서 확인할 수 있습니다.
- https://docs.automationanywhere.com/ko-KR/bundle/enterprise-v2019/page/enterprise-cloud/topics/aae-client/bot-creator/using-variables/unicode-range.html
- https://ko.wikipedia.org/wiki/KS_X_1001%EC%9D%98_%ED%8A%B9%EC%88%98_%EB%AC%B8%EC%9E%90
- blog.naver.com/stjjamrabbit/223147827389