Only Do~! What Only You Can Do~!!

기본글꼴인 굴림체가 마음에 안들어서 글꼴을 변경해 보았다.
글꼴이 공짜라고 알고 있는 사람들이 많지만 사실 유료인 경우가 더 많다.
그래서 나는 무료글꼴을 찾다가 네이버에서 제공하는 나눔고딕체를 알게 되었다.



"네이버 한글캠페인 - 나눔글꼴을 나눕니다"(링크)

위의 링크를 클릭 하면 아래 처럼 바로 설치할 수 있는 화면이 나온다.




자신의 컴퓨터 OS버전에 맞게 클릭해서 설치하면 된다.
본인은 OS가 윈도우 이므로 왼쪽 윈도우용을 클릭 했다.
그러면 아래와 같이 다운로드 창이 뜬다.
실행을 클릭하면 다운 후 설치화면이 나타난다.




설치가 끝나면 C:\WINDOWS\Fonts 경로에 설치된 것을 알 수 있다.



*.TTF 형식의 글꼴은 윈도우와 크롬이나 오페라 브라우저에서 사용할 수 있고, 일반적으로 많이 사용하는 익스플로러 브라우저에서는 웹형식의 글꼴(*.eot)이 있어야 제대로 볼 수 있다.
웹형식으로 바꾸는 것은 차후 설명하기로 하고 바꿔놓은 것을 아래에 올려 놓았다.





 




위의 파일들을 임시 폴더에 저장한 후 (*.eot)파일과 (*.ttf)파일명을 똑같이 만들어 놓는다.
※ (*.ttf 파일명을 바꾸는 것은 style.css 파일에 적용할 때 font-family명과 구분하기 위한 것이다.)






아래 첫번째 그림의 스킨-HTML/CSS 편집을 클릭하고, 두번째 그림처럼 파일 업로드 탭을 선택 후 웹폰트(*.eot)파일 과 (*.ttf)파일을 블로그에 업로드 한다.
업로드가 완료되면 3번째 그림처럼 images/NNGothic.* 처럼 업로드 된 것을 확인 할 수 있다.






아래 코드를 style.css 첫줄 @charset "utf-8"; 다음 줄부터 입력한다.
※아래 코드를 더블클릭 하면 블럭이 설정되어 복사해서 쓸 수 있다.





나는 프로그램 코드를 많이 쓰기 때문에 가독성이 뛰어나야한다.
특히, l(소문자 엘),I(대문자 아이), 0(숫자 영), O(대문자 오) 같은 글자들은 굴림체나 나눔고딕체에서는 구분하기 힘들다.
그래서 따로 찾아 낸 것이 나눔고딕코딩체다.

나눔고딕코딩체(링크)





나눔고딕코딩체와 나눔고딕체 둘다 같이 적용하려면 아래와 같이 style.css에 입력한다.
※아래 코드를 더블클릭 하면 블럭이 설정되어 복사해서 쓸 수 있다.



입력 후 저장 하면 적용 된다.




위의 코드를 적용 해도 본문의 글꼴이 바뀌지 않았을 경우 style.css의 .article class를 수정해 본다.
※아래 코드를 더블클릭 하면 블럭이 설정되어 복사해서 쓸 수 있다.