티스토리 웹 폰트 적용하기(hELLO 스킨)

요즘 많이 적용한다고 하는 스포카 한 산스 네오(Spoqa Han Sans Neo)를 티스토리 폰트로 적용 해보았다. 

 

https://spoqa.github.io/spoqa-han-sans/

Spoqa Han Sans Neo

위 링크에 들어가 웹 폰트 적용하기를 클릭하면 자세하게 설명되어있다. 

 

 

블로그관리 > 꾸미기 > 스킨편집에 들어가 [html 편집] 클릭하여 HTML과 CSS탭에서 작업하면 됨

 

나는 태그 안에 link 코드를 넣었다.

HTML 탭을 클릭하여 상단에 넣음

 

웹폰트 적용하기 (잘못된 예)

검색해보니 fontawesome과 관련된 내용과 font-family 속성에 있는 글씨체만 대체하면 될 줄 알고 아래와 같이 실행했다.

- HTML 탭에서
	<script async src="//kit.fontawesome.com/65f7e05682.js"></script> 삭제 
    
- CSS 탭에서 기존에 있던 Font Awesome 5 Free를 전부 대체
    // before
    font-family: 'Font Awesome 5 Free';

    // after
    font-family: 'Spoqa Han Sans Neo';

그랬더니 기존 아이콘들이 전부 투명해져버렸다. 

이렇게 하면 망한다. 안보이는 아이콘 하나하나 css를 찾아 'Font Awesome 5 Free'로 바꿔주다가 다시 원복 했다.

 

웹폰트 적용하기 (잘된 예)

아래 부분만 바꿔주면 끝날 것을 삽질 엄청 했다.

글씨체 적용 시 이 부분만 하면 됨

 

적용 후 육안으로 보면 사실 다른게 뭔지 잘 모르겠어서 비교해보았다.

개발자 도구로 요소를 봤을 때 스포카 한 산스로 적용함

 

크게 눈에 띄는 부분은 숫자가 바뀐 것과 자세히 보면 글씨체 굵기가 조금 바뀐 것으로 보인다. 

스포카 한 산스 네오 적용 전/후 비교

스포카 한 산스란?

스포카 한 산스 폰트는 웹에서도 부담없이 사용할 수 있게 경량화 된 폰트이다. 

현재 토스, 타다 등의 여러 사이트가 이 폰트를 사용한다고 한다.

스포카 한 산스 네오는 기존의 스포카 한 산스 폰트를 개선한 폰트이며, 스포카 한 산스는 노토 산스 폰트를 국문과 어울리게 커스텀한 폰트라고 한다.

노토 산스는 국문, 영문, 일문에 대응하는 오픈소스 글꼴이며 구글에서 전체적으로 제작 했다고 한다. 

노토 산스에 대해 잘 정리한 블로그 글을 가져왔다.

https://blog.naver.com/storm266/221572140158

구글, 어도비에서 개발한 가독성 좋은 폰트! 노토 산스 (noto sans)