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


스크린샷-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번만 적용시키는 것인지도 궁금합니다.

안녕하세요..~

1번은 이 사이트에서는 이런 폰트를 사용할거야~ 이 폰트 파일의 경로는 여기야~ 라고 명시적으로 선언을 하는 부분입니다.
3번은 1번에서 선언한 폰트를 내가 지정한 태그 (ex: h1, h2 등등..)에 적용하겠어~ 라고 실제로 사용하는 부분입니다.

위치는 중요하지 않고 맨 위나 아래에 넣어주시면 되고
1번과 3번 둘다 적용해야 합니다.

답글 주셔서 감사합니다.
말씀 해주신 부분은 이해를 했습니다.

한가지 더 궁금한 부분이 있는데요.
css 적어 주신 부분에 url을 보면 ./asset/font/ 이런식으로 되어 있는데요.
저의 경우는 asset이란 폴더가 없고 wp-include 폴더 안에 font 폴더가 있는데요.
이럴경우에는 css를 어떻게 수정을 해야 할까요?

워드프레스에는 한글 폰트가 들어있지 않고 직접 연결해서 써야합니다.
http://hangeul.naver.com/2016/nanum 에서 받아서 원하는 폴더에 넣고 경로를 맞춰넣으면 됩니다.
wp-include 폴더는 수정하거나 파일을 추가하시면 안됩니다. ( 버전업이 되서 업데이트를 하면 덮어쓰기가 되서 다 날라갑니다. )
css 로 적용하기가 어렵다면.. 혹시 로켓폰트를 사용해보셨나요?

먼저 처리해야 할 부분이 있어서 로켓폰트를 지금 적용해 보았습니다.

익스에서도 제대로 나눔바른고딕이 보입니다.

정말 감사합니다.

저에게 엄청 고민 되는 문제 중에 하나였는데 해결 할 수 있게 되어 정말 다시 한번 감사드립니다.

아 익스에서 잘 적용됐나요? 다행이네요..~
나중에 워드프레스로 사이트 만들때 동일하게 사용하시면 폰트는 그냥 적용될겁니다.

로켓 폰트라는 플러그인을 말씀 하시는 것이라면 찾아서 적용해보도록 하겠습니다.

답변 정말 감사드립니다.

잘 만든건 아니라서 조금 민망하지만.. 로켓폰트는 제가 만든 플러그인입니다.
https://wordpress.org/plugins/rocket-font/
워드프레스에 한글폰트 적용을 어려워하시는 분들이 꽤 되는것같아서 만들어 봤습니다..
한번 사용해보시고 잘 되면 폰트를 업로드하고 적용할 필요는 없을겁니다.