Hueman 테마에 기본 폰트는 "Titillium Web"로 웹 폰트이고 영문만 지원하기 때문에 한글은 각 OS의 시스템 기본 폰트로 적용됩니다.
스포카 한 산스로 변경
무료로 사용할 수 있는 한글 웹 폰트 스포카 한 산스를 적용해 보도록 하겠습니다.
스포카 한 산스 : https://spoqa.github.io/spoqa-han-sans/ko-KR
1. 루트폴더\themes\hueman\source\css\_variables.styl 파일 열어 // Fonts를 찾는다.
font-sans = "Titillium Web", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif
- font-sans =에
"Spoqa Han Sans"를 추가한다.
font-sans = "Spoqa Han Sans", "Titillium Web", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif
2. 루트폴더\themes\hueman\source\libs 폴더에 다운로드한 웹 폰트 폴더 파일을 넣는다.
-
폴더명은 spoqa-han-sans로 하고 styles.css파일과 fonts 폴더를 만들어 폰트 파일을 넣는다.
-
CDN을 이용할 경우 생략
3. 루트폴더\themes\hueman\layout\common\head.ejs 파일을 열어 수정한다.
// 아래 부분을 찾아서 삭제 또는 주석 처리 또는 계속 사용할 경우 그냥 둔다.
<%- css('libs/titillium-web/styles') %>
// 위에 것을 아래 코드로 변경 또는 그 아래에 넣는다.
<%- css('libs/spoqa-han-sans/styles') %>
// CDN 을 사용할 경우에는 아래처럼 CDN 주소를 넣는다.
<%- css('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css') %>- 참고 esj 템플릿 주석 처리
// esj 템플릿 주석은 샾이다 "#"
<%#- css('libs/titillium-web/styles') %>
// 자바스크립트 주석을 사용하려면 //
<%//- css('libs/titillium-web/styles') %>- html 주석으로 감싸면 코드는 실행되지만 html에서 보면 주석으로 되어 있다.(html 주석은 렌더링 됨)
<!-- <%- css('libs/titillium-web/styles') %> -->
<!-- <link rel="stylesheet" href="/libs/titillium-web/styles.css"> -->반응형
