공부도 할겸, 블로그 운영을 시작하겠다고 마음 먹고 글을 올리는데
가장 신경쓰이던 부분이 폰트였습니다. 왠지 제가 쓴글은 가독성도 떨어지고 난잡해보이기까지 합니다. 필력은 지속적으로 포스팅하다보면 좋아질거라고 믿고 폰트를 찾아봤는데 "나눔고딕"을 많이들 쓰시더라구요.
많이 쓰는데에 이유가 있는법, 대세를 따라가기로 했습니다.
그래서!! 오늘은 나눔고딕 웹폰트를 적용해보겠습니다.
여기서 웹폰트란?
코드에 import한 글꼴을 웹 브라우저상으로 사용할 수 있게 해줍니다.
간단하게 말해서 웹브라우저 위에서 적용한 폰트를 모든 사용자에게 보여준다는건데요, 그럼 설치해볼까요.
저는 간편한 CSS import 방식으로 진행할게요.
▶ 적용해보기
https://fonts.google.com/earlyaccess
▲ 해당 사이트에 접속하셔서 Nanum Gothic을 찾으셔도 되고 제가 가져온 내용을 참고하셔도 될 것 같네요.
Link
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);Example
font-family: 'Nanum Gothic', sans-serif;[블로그에 적용하기 - 예제]
▶ @import 추가
이제 준비는 되었으니 코드를 삽입해볼께요.
1. 위 코드를 복사하여 티스토리 관리메뉴 > HTML/CSS 편집으로 갑니다.
2. CSS 탭상자 클릭후 최상단에 코드를 삽입합니다. @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
▶ 기존 font-family 속성에 'Nanum Gothic' 추가
1. 편집창에서 Ctrl + F로 font-family 검색, 기존 font-family가 적용되어 있는 곳을 찾아서 그 밑에 추가해줍니다.
(기존 font-family 속성 대신 입력하시거나, 주석처리 하셔도 무방합니다)
2. 블로그에 적용된 스킨이 다르면 위 코드 내용과 다를 수 있지만 똑같이 font-family 속성을 검색하여 바꿔주시면 됩니다.
1. 위 과정에서 body 태그 안에 넣었으니 적용되었겠지만 저는 article css도 변경해주었습니다. (본문 영역)
2. article css가 없으셔도 위 과정에서 대부분 적용될 것 입니다.
[적용 완료 화면]
- 블로그 글쓰기 글꼴에 나눔고딕 선택하는 항목이 없다고 당황하지마시고, 글을 쓰신다음에 확인해보면 나눔고딕이 적용되는걸 확인하실수 있습니다.