구글 웹폰트 티스토리 블로그에 적용하기

Posted by sunstar
블로그 팁

구글웹폰트티스토리블로그에적용하기_1


예전에 발행했던 글에 댓글이 올라와 간단하게 몇글자 적으려고 합니다.


저는 Readiz님이 배포하는 FastBoot 스킨을 사용 중인데요.


지금부터 두드리는 팁은 스킨마다 상이할 수 있으니 100%가 아니라는 점을 참고하시고 읽어 주길 바랍니다.


먼저 아래 링크된 구글 웹폰트 페이지에 접속하시구요.


https://fonts.google.com/?subset=korean


제 블로그에 적용하고 있는 나눔고딕을 예로 들겠습니다.


위에 링크된 페이지를 방문하면 여러개의 한글 폰트가 있는데요.

마음에 드는 웹폰트를 선택해서 오른쪽 상단  모양의 아이콘을 누르시구요.

구글웹폰트티스토리블로그에적용하기_2


페이지 오른쪽 하단에 생성되는 Family Selected 바를 클릭합니다.

그러면 바가 아래 샷처럼 활성화되는데요.


EMBED > STANDARD로 열린 창에서 <link href=~~ 부분을 드래그 & 드롭으로 파랗게 블록 설정한 후 복사(Ctrl +C)하시구요.

구글웹폰트티스토리블로그에적용하기_3


티스토리 블로그 관리 홈으로 와서 스킨 편집으로 들어갑니다.

구글웹폰트티스토리블로그에적용하기_4


새 탭으로 열린 스킨 편집창에서는 html 편집 버튼을 누르시구요.

구글웹폰트티스토리블로그에적용하기_5


HTML 탭으로 열린 스킨 편집창 <head>와 </head> 사이에 구글 폰트 페이지에서 복사한 링크 주소를 붙여넣기한 후, 적용 버튼을 누릅니다.

구글웹폰트티스토리블로그에적용하기_6


그리고 CSS를 탭하고  찾기 기능(Ctrl+F)으로 font-family를 찾아서 나눔고딕('Nanum Gothic',) 폰트를 1순위로 지정해 주면 구글 웹폰트가 블로그에 적용됩니다.

구글웹폰트티스토리블로그에적용하기_7


※ font-family는 사용하는 스킨에 따라 하나가 될 수도 있고 두개, 세개 또는 그 이상이 검색될 수도 있습니다.

즉, 제가 사용하는 스킨은 일체형으로 font-family가 하나 뿐이지만, 본문과 댓글, 사이드바, 카테고리 등으로 분리된 스킨은 여러개로 검색되니 참고하시길요.



이 댓글을 비밀 댓글로
  1. https://roachsblog.tistory.com/ 이블로그
    이거 폰트설정할라고하는데
    html에서
    바퀴의 블로그Software Hardware Game Technology
    제블로그 에서 Software Hardware Gane Technology
    이부분 넣을라고하는데
    html/css/js 다까먹어서용
    다시 공부하고있습니다
    font-family :
    첫블로그들어오면 바퀴의 블로그 :: 바퀴의 블로그 이게 뜨게하고싶는데
    어캐하는지 이거 까먹엇습니다
    예들리면
    윈도우10 맥OS 폰트로 바꾸기 :: 바퀴의 블로그 이게하고싶어서용
    • 이 부분은 저도 모릅니다.
      바퀴의 블로그 운영자에게 물어보심이 제일 빠를 겁니다.
    • 바퀴이랑 안친해영