Ticker

6/recent/ticker-posts

구글 웹폰트 티스토리에 적용하는 법

 구글 폰트는 대표적인 SIL 오픈 폰트 라이선스 (SIL Open Font License)를 가진 폰트로 현재 사용가능한 구글 웹폰트는 26개입니다. 구글 웹폰트라고 해서 제작자가 전부 구글이 아니고 각각의 제작자가 구글의 서버 저장소를 이용해서 블로거들에게 웹폰트를 사용가능하게 하고 있습니다. 일종의 제휴라고 할 수 있습니다. 네이버와 다음의 티스토리에도 폰트 설정부분에 일부 폰트가 포함되어 있습니다.

우선 구글 웹폰트 종류를 알아보고 이어서 구글 웹폰트를 티스토리 적용해서 실제 사용하는 법에 대해서 알아보도록 하겠습니다.

 

구글의 웹폰트 종류

요즈음은 돋움체, 굴림체와 같은 기본폰트보다는 보기에도 좋고 가독성도 좋은 웹폰트를 많이 사용합니다. 그 중에서 가장 인기있는 폰트는 산돌의 나눔폰트 중에 특히 나눔고딕 폰트라고 할 수 있습니다.

<필기체 느낌의 폰트는 자신만의 독특한 블로그를 꾸미기를 원한다면 한번쯤 고려할 만합니다. 물론 가독성 때문에 본문의 체류시간이 떨어질지도 모릅니다. 

>아래는 티스토리 혹은 블로그, 워드프레스 등에서 사용 가능한 구글 웹폰트 26개 모음입니다. 티스토리에서 무료로 사용가능합니다. 자세한 라이센스는 각각의 폰트 선택시 라이센스부분을 참고하세요. - SIL 오픈 폰트 라이선스 (SIL Open Font License)

구글 Noto Sans KR, 산돌 나눔고딕, 산돌 나눔고딕 코딩, 윤디자인 동해 독도
구글 Noto Sans KR, 산돌 나눔고딕, 산돌 나눔고딕 코딩, 윤디자인 동해 독도



폰트릭스, 산돌의 나눔명조, 한강의 고딕 A1, 산돌의 나눔 펜 스크립트, 제스 타이프의 Black Han Sans
폰트릭스, 산돌의 나눔명조, 한강의 고딕 A1, 산돌의 나눔 펜 스크립트, 제스 타이프의 Black Han Sans

구글 Noto Serif KR, 우아한 형제들의 도 현, 직지소프트의 선플라워, 우아한 형제들의 연 성
구글 Noto Serif KR, 우아한 형제들의 도 현, 직지소프트의 선플라워, 우아한 형제들의 연 성

산돌의 나눔 브러쉬 스크립트, 태 시스템과 타이프페이스의 Gugi, 우아한 형제들의 Jua, 윤디자인의 Hi Melody
산돌의 나눔 브러쉬 스크립트, 태 시스템과 타이프페이스의 Gugi, 우아한 형제들의 Jua, 윤디자인의 Hi Melody

윤디자인의 감자꽃, 직지소프트의 Gaegu, 아시아소프트의 스타일리쉬, 타이포디자인의 Cute Font
윤디자인의 감자꽃, 직지소프트의 Gaegu, 아시아소프트의 스타일리쉬, 타이포디자인의 Cute Font

직지의 송 명, 폰트릭스의 독도, 윤 디자인의 Poor Story, 아시아소프트의 Black And White Picture
직지의 송 명, 폰트릭스의 독도, 윤 디자인의 Poor Story, 아시아소프트의 Black And White Picture

우아한 형제들의 Kirang Haerang, DXKorea Inc의 Single Day
우아한 형제들의 Kirang Haerang, DXKorea Inc의 Single Day

구글 웹폰트 티스토리에 적용하는 법

1. 이제 티스토리에서 사용하는 법을 알아볼까요? 산돌의 나눔 고딕 코딩으로 선택했습니다. 이미지가 선명하지 않은 것은 이미지를 클릭하세요.

구글 웹폰트 티스토리에 적용하는 법
구글 웹폰트 티스토리에 적용하는 법

>2. 스타일의 폰트를 16px -17px정도의 티스토리의 본문폰트 크기로 맞춘 다음 스타일을 선택합니다. 이렇게 하는 이유는 실제로 본문 크기일때의 가독성을 확인하기 위함입니다. 그리고 이미지의 우측 상단을 클릭합니다. 

선택 옵션 보기
선택 옵션 보기
구글 웹폰트 티스토리에 적용하는 법 - 스타일 선택
구글 웹폰트 티스토리에 적용하는 법 - 스타일 선택

3. 아래는 폰트를 나눔 고딕 코딩으로 선택을 했고 레귤러 400 스타일을 선택한 상태입니다.

구글 웹폰트 티스토리에 적용하는 법 - 상세 이미지
구글 웹폰트 티스토리에 적용하는 법 - 상세 이미지

4. 선택창을 확대한 화면이 아래에 있습니다. 

구글 웹폰트 티스토리에 적용하는 법 - 상세 설정 확대 이미지
구글 웹폰트 티스토리에 적용하는 법 - 상세 설정 확대 이미지

티스토리의 에디터(html)에 <head>사이에 아래 소스를 붙여넣기 합니다. 웹폰트를 불러오는 소스입니다. 물론 일반적인 돋움, 굴림 등의 폰트보다는 블로그 로딩시간이 좀 더 걸리게 됩니다. 아래 소스는 예시입니다. 각각의 폰트마다 소스가 달라지게 됩니다.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">

그리고 티스토리 에디터의 CSS 설정 중 body부분 폰트설정 ex) body { }에도 아래 소스를 추가해 줍니다. 그러면 모든 설정이 끝이 납니다. 

font-family: 'Nanum Gothic Coding', monospace;

구글 웹폰트 종류 소개와 티스토리에 구글 웹폰트를 적용하는 법에 대해서 알아보았습니다. 

© blogmarble.com. All rights reserved. 본 콘텐츠의 무단 전재, 복사, 배포 및 재가공 금지