티스토리에 구글 웹폰트 적용하기 (Noto Sans KR)

 

 

티스토리는 한글 폰트를 5가지를 제공하고 있다.

(고딕, 굴림, 바탕, 돋움, 궁서)

 

 

기본으로 제공하는 폰트 외에

다른 폰트를 적용하기 위해서는

구글 웹폰트를 활용 할 수 있다.

 

*웹폰트란?

 

폰트를 서버에서 불러들여오는 방식을 말한다.

사용자의 pc에 해당 폰트가 설치되어 있지 않아도

구동이 되는 장점이 있다.

단점은 인터넷 환경에 따라서 읽어오는 속도 때문에

제때 적용이 안될 수 있다.

구글 웹폰트란 구글의 서버에서

폰트를 불러와서 웹페이지에 적용하는 것을 말한다.

구글에서 제공하는 서비스다.

 

[참고]

 

생활코딩 - 웹폰트란?

웹폰트 이해하기: 왜 웹페이지에서는 굴림체만 보일까?

 

 

<Noto Sans KR 구글 웹폰트 적용하기>

 

 

Google Fonts 웹사이트 링크

 

구글 폰트 사이트에 접속하면

한글 지원 구글 웹폰트를 보여준다.

(미리 언어를 korean으로 설정해 놓았다)

 

Noto Sans KR를 찾아서 클릭한다.

 

*노토산스 폰트란?

구글과 어도비가 함께 개발한 한중일 공통 폰트이다.

오픈소스이고 본고딕이라고도 한다.

중요한 특징은 상업적으로 이용이 가능하다는 것이다.

 

[참고]

 

위키백과 - 본고딕

구글 본고딕 다운로드

폰트에도 저작권…“모르고 쓰면 위험하다”

 

 

Noto Sans KR의 안내 페이지다.

여기서 글자체와 굵기를 확이할 수 있다.

폰트 사이즈를 조절하여

폰트사이즈에 따른 폰트 굵기의 느낌을

확인할 수 있다.

 

 

 

폰트명 오른쪽에 플러스(+) 버튼을 클릭하면

해당 폰트가 'Family Selected'에 담긴다.

Family Selected에서 [EMBED]탭을 선택 후

[@IMPORT]를 클릭한다.

 

바로 아래 회색 박스에 있는 코드를 복사하여

티스토리 '스킨 편집'으로 간다.

 

[회색 박스]

 

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR'); -> 폰트를 불러오는 코드

font-family: 'Noto Sans KR', sans-serif; -> 폰트를 적용하는 코드

 

*굳이 구글 웹포트 사이트에 들어가지 않고

위에 있는 코드를 사용해도 무방하다.

 

 

티스토리의 '스킨 편집'에 들어간다.

CSS에서 @charset "utf-8"; 코드 아래에

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR');

코드를 붙여넣기 한다.

 

*@import 코드를 상단에 배치하는 이유는

브라우저가 위에서 아래로 코드를 읽기 때문이다.

위에 있는 웹폰트 코드를 읽고 나서야

아래쪽에 적용된 폰트패밀리 웹폰트가 동작한다.

순서가 바뀌면 아무래도 비효율적일 것이다.

 

 

CSS 상단에 @import 코드를 붙여넣은 상태에서

font-family에 'Noto Sans KR'을 추가해준다. 

 

사진에서는 'Noto Sans KR'과 'Nanum Gothic'이 적용되어 있는데

이는 본인이 따로 추가한 것이다.

기본 값은 Arial이 첫 번째이다.

 

복붙이 끝났다면 

우측 상단의 적용을 클릭해준다.

 

 

블로그를 확인해보니 노토산스 폰트가

제대로 적용된 것을 확인할 수 있다.

같은 방법으로 구글 폰트에서

다른 폰트를 불러올 수 있다.

(저작권에 유의하자)

 

*폰트를 적용했더라도 일부분은

기존과 같은 폰트가 적용되어 있을 것이다.

그런 곳은 찾아들어가서 폰트를 설정해줘야 한다.

해당 영역의 font-family에 찾아들어가서

폰트명을 입력해주면 된다.