[웹폰트] 티스토리 블로그 나눔바른고딕 폰트 적용

남양주개발자

·

2016. 9. 22. 11:39

728x90
반응형


하루에 적지않은 양의 글들(주로 웹페이지)을 읽게 되는데 이따금씩 글꼴의 중요성을 실감하게 됩니다. 

저는 글꼴 중에도 "나눔바른고딕"을 선호하는데요. 티스토리 블로그를 시작하면서 블로그 디폴트 폰트로 나눔바른고딕으로 설정했습니다.


웹폰트로 폰트를 적용시켰고, 적용시키는 법에 대해서 이설명하도록 하겠습니다 !


HTML / CSS를 모르는 초심자를 대상으로 쉽게 설명할 예정이니 이 글을 쭉 따라서 적용하시면 쉽게 적용하실 수 있을 겁니다.




왼쪽 중간쯤에 있는 HTML / CSS 편집을 들어가면




이렇게 HTML/ CSS을 편집할 수 있는 에디터를 보실 수 있습니다.

이제 여기서 몇 가지 코드를 적용을 시켜야 되는데요.


오른쪽 HTML 문서 파일에 </head> 부분이 있을겁니다. 그 바로 위에 아래에 코드를 집어 넣도록 하겠습니다.







저는 이쯤에 넣었습니다.


다음은 CSS 편집을 하도록 하겠습니다.




위에 있는 코드를 CSS 파일 최 상단에 넣어주도록 합니다

.






저는 상단 저부분에 임포트 시켜줬습니다 ㅎ

이제 나눔바른고딕 폰트를 사용할 준비가 끝났습니다. 이제 폰트를 적용시켜보도록 할게요.




css 편집기를 들어가보시면 저런 부분이 있을겁니다. 핵심은 body태그에 font-family 부분입니다 !

font-family란 어떤 폰트를 사용할지를 정해주는 태그인데요. 위의 예시처럼 "Nanum Barun Gothic"을 넣어줍니다.


이제 저장하고, 적용이 잘 되었는지 확인을 한번 해볼까요.



F12 크롬 개발자모드로 들어가서 확인한 결과 나눔바른고딕 폰트가 잘 적용이 되었음을 확인할 수 있습니다.

이 방법으로 다른 웹폰트도 동일하게 적용시킬 수 있습니다


티스토리와 관련된 또 다른 팁이 궁금하다면?


티스토리 검색엔진 최적화(SEO) 시키는 방법


티스토리 검색엔진 최적화(SEO) 시키는 방법

SEO란? SEO는 Search Engine Optimization의 약자로 말 그대로 검색엔진이 좋아하는 웹사이트의 조건을 갖추는 것을 의미합니다. SEO작업을 진행하기 위해서는 Sitemap과 RSS 작업을 해야합니다. Sitemap이란? Sit..

webruden.tistory.com


티스토리 애드센스 자동광고가 나오지 않을 때 해결방법


티스토리 애드센스 자동광고가 나오지 않을 때 해결방법

애드센스 심사를 마치고 자동광고를 삽입했는데, 간헐적으로 광고가 안나오는 증상이 발생하기 시작습니다. PC, Mobile 둘 다 똑같은 증상이 발생 기존에 애드센스 스크립트를 삽입할 때는 아래와 같은 방법으로..

webruden.tistory.com


티스토리 highlight.js를 활용해서 코드 하이라이팅을 적용하는 방법


티스토리에 highlight.js를 활용하여 코드 하이라이트 추가하는 방법

highlight.js Highlight.js는 자바스크립트로 쓰인 코드 구문 강조를 위한 라이브러리이다. 어떠한 프레임워크에도 의존하지 않고, 거의 모든 마크업에서 작동하며 언어 감지 기능을 가지고 있다. 다양한 언어와..

webruden.tistory.com


728x90
반응형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다

1개의 댓글