사용자폰트 설정

케이테마는 구글폰트의 api이용하여 구글의 모든 폰트를 지원하고 있습니다. 하지만 구글폰트에 등록되지 못한 한글폰트를 사용하기 쉽지가 않았습니다. 이번 업데이트를 통해 외부 폰트를 사용하기 쉽게 업데이트 하였으니 아래 단계를 따라 확인해보시기 바랍니다. 

한글폰트를 지원하는 다양한 사이트가 있지만 눈누폰트를 기준으로 적용하는 방법을 설명드리겠습니다. 

눈누폰트

눈누폰트는 다양한 국내폰트의 정보를 제공하고 있습니다. 폰트의 미리보기는 물론이고 CDN형태로 제공하고 있어 파일을 서버에 올리지 않고 코드 만으로 적용이 가능합니다. 아래의 링크로 접속하여 원하는 폰트를 확인하시기 바랍니다. 

https://noonnu.cc/

눈누폰트 접속 및 폰트 확인

미리보기 및 폰트선택

폰트를 확인하고 미리보기를 할 수 있습니다. 회원가입을 하면 폰트 즐겨찾기 등 더 다양한 기능을 제공하고 있습니다. 원하는 폰트를 확인하고 폰트 이름을 눌러 상세페이지로 이동하시기 바랍니다. 

폰트테스트 및 코드복사

폰트 미리보기를 통해 제공되는 폰트의 스타일을 확인할 수 있습니다. 굵기와 내가 원하는 텍스트를 입력했을 때 미리보기 까지 가능합니다. 굵기, 글자 미리보기, 사이즈 까지 가능하니 미리보기를 통해 충분히 테스트 해보시기 바랍니다. 

적용하기 원하는 폰트가 있다면 “웹폰트로 사용” 섹션의 복사 버튼을 클릭합니다.  해당 코드는 css코드로 테마에 적용하게 될 내용입니다. 일반적으로 아래와 같은 형태로 제공됩니다. 

@font-face {
font-family: 'SBAggroB';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
font-weight: normal;
font-style: normal;
}

위 내용을 복사하고 아래 단계에 따라 적용을 합니다. 

테마사이트 적용

위 복사된 코드를 테마사이트에 적용해야 합니다. 관리자로 로그인을 하여 아래와 같은 단계로 적용하시기 바랍니다. 

테마의 사용자정의 ( Customize ) 

관리자로 로그인하여 페이지로 이동하면 상단에 “사용자정의”이라는 메뉴를 확인할 수 있습니다. 위 메뉴를 클릭하고 다음으로 이동하시기 바랍니다. 

추가 CSS 적용

사용자정의 메뉴 중 추가 CSS 로 이동하여 위에서 복사한 코드를 붙여넣기 합니다. 추가 이후 아래의 코드로 함께 붙여넣기 해줍니다. 
주의할 점은 font-family 속성이 잘 맞아야 합니다. Roboto 다음에 오는 Noto Sans KR을 삭제하고 위 눈누폰트에서 복사한 코드 중 font-family 에 해당 하는 영문자를 넣습니다. 본 매뉴얼에서는 “SBAggroB”로 되어 있기 때문에 해당 글자가 들어가 있습니다. 

.depicter-revert h1, .depicter-revert h2, .depicter-revert h3, .depicter-revert h4, .depicter-revert p, .depicter-revert figure, .depicter-revert blockquote, .depicter-revert dl, .depicter-revert dd,.depicter-revert .depicter-element,
body {
font-family: Roboto, 'Noto Sans KR', Dotum, '돋움', Helvetica, sans-serif !important;
}

수정 후 

.depicter-revert h1, .depicter-revert h2, .depicter-revert h3, .depicter-revert h4, .depicter-revert p, .depicter-revert figure, .depicter-revert blockquote, .depicter-revert dl, .depicter-revert dd,.depicter-revert .depicter-element,
body {
font-family: Roboto, 'SBAggroB', Dotum, '돋움', Helvetica, sans-serif !important;
}

이후 수정된 코드를 복사하여 붙여넣습니다. 

폰트적용 확인

CSS를 적용한 최종 모습은 위와같습니다. 눈누폰트에서 복사한 코드를 넣고 제공되는 css를 입력하면 우측에 미리보기를 통해 적용된 디자인을 확인할 수 있습니다. 

저장하고 화면으로 이동하시면 모든 설정이 완료됩니다.