나눔바른고딕 웹 폰트를 워드프레스에 적용해 보자.


스크린샷-2014-06-24-오후-8.47.19

01 나눔바른고딕 css 적용하기

나눔바른고딕을 워드프레스에 적용하기 위해서 해당 테마 style.css 파일 상단에 다음 코드를 넣습니다. css에 익숙하지 않은 분들은 다음 코드에서 “./asset/fonts/NanumBarunGothic.eot” 이런 경로 부분에 신경 쓰셔야 합니다.

02 나눔바른고딕 서버에 업로드하기

위 코드의 css 경로와 같은 위치에 다음 코드를 업로드 하세요. 이미 만들어 놓은 분이 있어서 링크로 대체 합니다. 상세한 설명도 같이 있으니 참고하시기 바랍니다. 그냥 따라하기로 마무리 하고 싶은 분들은 본 글을 읽고 따라하시는게 쉬울 수 있습니다.

다운로드 바로가기

위 링크의 페이지에서 우측 하단 Download Zip 파일을 클릭하시면 됩니다. 압축파일을 풀면 .eot 파일과 .woff 파일이 있습니다. nomal과 Bold파일로 모두 4개입니다. 경로에 맞게 서버에 업로드 해주세요.

 

03 나눔바른고딕을 원하는 곳에 적용하기

h1 ~ h6까지 모두 적용하고 싶은 경우 아래와 같이 코드를 적용합니다.  p태그 부분에 추가로 적용하고 싶다면 h6옆에 , p를 추가해 주면 됩니다.

앞 부분에 ‘Apple SD Gothic Neo’폰트가 있는 이유는 맥 유저가 접속했을 경우 나눔바른고딕 보다 우선적으로 맥의 시스템 폰트인 ‘Apple SD Gothic Neo’를 적용하기 위해서 입니다. 오히려 나눔바른고딕보다 ‘Apple SD Gothic Neo’가 훨씬 가독성이 뛰어나기 때문에 맥 유저에게도 나눔바른고딕을 적용할 이유가 없기 때문입니다.

여기에 추가로 영문은 나눔바른고딕을 적용하지 않고 영문 폰트로 적용하고 싶다면 앞에 영문폰트만 넣어주면 됩니다.

 



댓글 남기기

8 댓글 / "나눔바른고딕 웹 폰트를 워드프레스에 적용해 보자."

  댓글 이메일 구독  
구독 설정 :

안녕하세요.

좋은 정보 올려 주셔서 감사합니다.

한가지 문의 사항이 있어서 이렇게 글을 남깁니다.

1번 css 적용은 이해를 했습니다.
현재 진행중인 부분이 있는데 딱 03번에 나오는 예시와 같이 영어는 다른 폰트를 사용해야 하는데요.
그렇다면 올려주신 코드를 1번 코드 중에 어디에 위치를 시켜야 하는지 잘 모르겠습니다.
또한 영문은 다른 폰트를 써야 한다면 1번을 적용시키는게 아니라 3번만 적용시키는 것인지도 궁금합니다.