블로그에 나눔고딕 폰트 적용하기 - 티스토리, 워드프레스

히즈웨드 |

     티스토리 블로그 및 소스코드 편집이 가능한 사이트들에 글꼴을 원하는 것으로 변경해보자. 네이버에서 개발하여 무료로 사용가능한 나눔고딕체가 일반적으로 많이 사용된다. 글꼴을 삽입하는 것도 어려운 일이 아니지만, 몇가지 고려해야할 요소가 있다. 먼저, 모바일을 포함하여 다양한 브라우저(인터넷 익스플로러, 크롬, 사파리 등) 모두에서 폰트가 보여져야 한다. 또한 글꼴의 불필요한 다운로드가 발생하지 않도록 이미 다운로드 되어있는 글꼴부터 찾도록 해야할 것이다.

     

    나눔고딕 폰트는 대한민국에서 개발된 글꼴로, 나눔글꼴을 통칭하는 이름 중 하나입니다. 나눔글꼴은 한글과 영문 글자를 모두 지원하는 폰트로, 한글 글꼴에 대한 자유로운 이용을 목적으로 만들어졌습니다.

    나눔고딕 폰트는 웹사이트, 앱, 문서 등 다양한 디자인 및 텍스트 작업에 활용되며, 국내에서는 표준 글꼴로 자리 잡은 경우가 많습니다. 나눔글꼴의 등장은 한글 폰트의 다양성과 개발자들에게 더 많은 선택의 폭을 제공하며, 자유롭게 사용될 수 있는 글꼴의 중요성을 강조한 사례 중 하나로 평가받고 있습니다.

     

     

     아래 네가지를 순서대로 수행하면, 모든 브라우저(IE, 크롬, 사파리, 파이어폭스 등)에서 효율적으로 작동하는 나눔고딕 폰트가 작용될 것이다.

     

    나눔고딕 글꼴 다운로드

     

     

    NanumGothic.eot
    다운로드

              

    NanumGothic.ttf
    다운로드

     

     

     

     

     

    1. 나눔고딕 폰트파일 (.eot .ttf) 업로드

     

    • NanumGothic.eot 과  NanumGothic.ttf 파일을 서버의 원하는 위치에 저장한다. 티스토리 블로그라면 자동으로 image/ 폴더에 위치하게 될 것이다.

     

     

     

     

    2. <head> </head> 사이에 NanumGothic.eot 파일 로드하기

     

    • url() 괄호 안에 이태릭체로 된 부분은 폰트가 저정된 경로를 기입한다.
      (아래 예제는 티스토리 블로그 기준)
     
     
     
     
     

     

    3. CSS 파일 상단에 NanumGothic.ttf 파일 로드하기

     

    • url() 괄호 안에 이태릭체로 된 부분은 폰트가 저정된 경로를 기입한다.
      (아래 예제는 티스토리 블로그 기준)
     
    @font-face {      font-family:ngttf;      src:url(images/NanumGothic.ttf);  } 
     
     
     

     

    4. CSS에 font-family 속성 사용하기

     

     

    body {      font-family:NanumGothic,"나눔고딕",ngttf,ngeot,dotum,"돋음",sans-serif; } 

     

     

     

     

     마지막 font-family 속성은 원하는 태그에 사용하면 된다. 사이트 모든 페이지에 적용하고 싶다면, body 태그에 넣어주면된다. 참고로 대부분의 블로그나 뉴스 사이트에서 사용하는 나눔고딕용 글씨 크기와 글 간격(높이)은 아래와 같다.

     

        font-size: 14px;     line-height: 22px; 

     

     

     

    블로그에 적용할 다른 폰트 알아보기