워드프레스(wordpress)는 기본적으로 영어를 고려하여 설계된 플랫폼이라고 하겠습니다.
따라서 테마들을 주로 제작하고 있는 해외테마제작사들이 데모로 보여주는 테마의 레이아웃이나 디자인컨셉이 영어를 기본언어로 했을 경우 미려하게 보여지게 됩니다.
하지만 영어로 컨텐츠가 등록된 워드프레스 테마에 한글(명조체)가 입혀졌을 때는 디자인이 생각했던 것처럼 미려하게 보이지 않는것을 알게 됩니다.
따라서 워드프레스를 설치한 후 대다수 유저들은 기본폰트를 “나눔고딕”으로 변경하게 적용하게 됩니다.
오늘은 워드프레스(wordpress)에 나눔고딕폰트를 적용하는 방법등 한글화로 최적화 하는 방법을 소개해드립니다.
초보자들도 쉽게 설정할 수 있는 방법들을 소개해드리며 상세한 내용은 참조하실수 있는 링크를 같이 소개드리도록 하겠습니다.
1. WP Google fonts 플러그인을 적용하여 나눔고딕폰트 설정
먼저 Wp Google fonts 라는 플러그인을 설치합니다. 소스 코드를 건드리지 않고 플러그인으로 설정하는 이유는 테마를 변경하더라도 플러그인이 그대로 유지되어 나눔고딕 폰트 적용이 지속되기 때문입니다.
물론 자식테마를 별도로 설정하여 테마 변경후에도 CSS 수정내용을 그대로 유지할수 있지만 초보자에게는 아무래도 플러그인이 보다 쉬울 것이라고 생각됩니다.
[pe2-image src=”http://lh3.ggpht.com/-PlUCOsLSPRs/U5LE5pkWNYI/AAAAAAAAD-g/4wgK_KDEhFs/s144-c-o/WP%252520Google%252520Fonts%252520%2525ED%252594%25258C%2525EB%25259F%2525AC%2525EA%2525B7%2525B8%2525EC%25259D%2525B8.jpg” href=”https://picasaweb.google.com/102394476629197694908/201406#6022092146437666178″ caption=”WP Google Fonts 플러그인.jpg” type=”image” alt=”WP Google Fonts 플러그인.jpg” ]
WP Google fonts 플러그인을 설치한후 특정 폰트를 선택한후 3번 Custom CSS 항목값에 아래의 코드 값을 입력후 저장합니다.
@import url(“http://fonts.googleapis.com/earlyaccess/nanumgothic.css” ) ;
body, h1, h2, h3, h4, h5, h6, li, p { font-family:”Nanum Gothic”,”NanumGothic” !important ; }
나눔고딕 구글 웹폰트를 불러오며 본문과 주요 타이틀별 제목들에 나눔고딕 폰트를 적용하겠다는 내용입니다. Nanum Gothic 을 띄어쓰기한 것과 붙여쓰기 한 경우를 같이 넣어주는데 이것은 익스플로러 버전 일부에서 나눔고딕이 잘 불러와 지지 않는 문제를 좀 더 개선하기 위해서 입니다.
2.WP Google fonts로 나눔고딕 적용되는 않는 부분들을 수정
테마에 따라서 상기 플러그인을 적용했을 때 나눔고딕폰트가 완벽하게 되는 경우도 있지만 그렇지 않은 경우도 있습니다. 이 경우는 크롬 브라우저의 요소검사 기능을 활용하여 수동으로 나눔고딕 폰트를 적용시켜 줍니다.
[pe2-image src=”http://lh6.ggpht.com/-WeAIpAGdNok/U5LHCElbc8I/AAAAAAAAD_M/wFN7kXYpWHM/s144-c-o/%2525EC%2525B9%2525B4%2525ED%252585%25258C%2525EA%2525B3%2525A0%2525EB%2525A6%2525AC.jpg” href=”https://picasaweb.google.com/102394476629197694908/201406#6022094490152170434″ caption=”” type=”image” alt=”카테고리.jpg” ]
크롬 브라우저에서 우측 사이드바 메뉴의 “카테고리” 라는 글씨가 나눔고딕이 적용되어 있지 않다고 가정해 보겠습니다. 카테고리라는 글자를 마우스로 반전선택한 후 오른쪽 마우스 버튼을 누르면 팝업메뉴중에서 요소검사(N)가 나옵니다.
요소검사를 선택해주면 크롬 브라우저 하단에 아래와 같은 정보가 나타나게 됩니다.
[pe2-image src=”http://lh4.ggpht.com/-2Rs9jsPjXRI/U5LHCA7hlnI/AAAAAAAAD_I/QpxY1tI-Y8U/s144-c-o/%2525ED%252581%2525AC%2525EB%2525A1%2525AC%2525EC%25259A%252594%2525EC%252586%25258C%2525EA%2525B2%252580%2525EC%252582%2525AC.jpg” href=”https://picasaweb.google.com/102394476629197694908/201406#6022094489171105394″ caption=”” type=”image” alt=”크롬요소검사.jpg” ]
폰트부분에 나눔고딕폰트가 아닌 다른 폰트가 등록되어 있다면 나눔고딕 폰트를 다른 폰트앞에 입력해 줍니다. 해당 CSS 수정은 외모-편집기를 실행시켜 Style.css 부분에서 수정해주시면 되겠습니다.
Style.css를 원문 수정하기 전에 크롬브라우저 요소검사기능을 이용하여 사전수정된 내용과 적용모습을 확인해 보실수 있습니다.
3.글쓰기 편집화면의 기본폰트를 나눔고딕폰트로 변경
사이트에서 보여지는 폰트를 나눔고딕폰트로 변경했지만 편집기 화면에서는 여전히 명조체가 기본폰트로 지정되어 있습니다. 따라서 편집기 기본화면의 폰트도 나눔고딕으로 변경합니다.
먼저 아래의 내용을 custom-editior-style.css 파일로 저장합니다.
body#tinymce.wp-editor {
font-family: “Nanumgothic”,”Nanum gothic” Arial, Helvetica, sans-serif;
margin: 12px;
}
body#tinymce.wp-editor a {
color: #4CA6CF;
}
이후 파일질라등의 FTP 프로그램을 이용하여 해당 파일을 테마의 루트폴더에 복사합니다. 이후 외모-편집기에서 function.php 파일을 불러온 후 아래의 코드를 추가 삽입합니다.
function my_theme_add_editor_styles() {
add_editor_style( ‘custom-editor-style.css’ );
}
add_action( ‘init’, ‘my_theme_add_editor_styles’ );
내용은 편집기의 스타일을 custom-editor-style.css 함수를 호출한 후 적용하여 사용하겠다는 내용입니다. 이러한 설정을 마치면 편집기의 기본폰트 나눔고딕 폰트로 적용됩니다.
관련 참조 링크 : METAPRESS.KR 워드프레스 에디터폰트 변경하기
4. 나눔고딕폰트가 익스플로러에서 Extra Bold로 표시되는 문제
크롬 브라우저에는 나눔고딕 폰트의 굵기가 정상적으로 표시되는데 익스플로러에서는 일반(Normal)는 두껍게(bold) , 굵게(bold)는 매우 두껍게(Extra bold)로 표시되는 경우가 있습니다.
익스플로러의 호환성보기 설정 문제로 인한 경우가 많으며 아래의 코드를 외모-편집기에서 header.php 파일의 <head> 하단에 삽입해 줍니다.
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
최신버전의 익스플로러로 렌더링을 진행하며 크롬엔진이 있다면 크롬으로 렌더링하겠다는 내용입니다. 이러한 코드를 넣어주면 거의 대부분 문제가 해결될 것입니다.
5.워드프레스 관리자화면 전체를 나눔고딕폰트로 적용
자식테마를 생성하여 관리자 화면 전체를 나눔고딕폰트로 적용하는 방법도 있습니다. 하지만 이 방법은 별도로 설명하지 않도록 하겠습니다.
테마에 따라서 아이콘이 X박스로 보인다거나 하는 상황이 자주 발생하며 워드프레스 3.9 업데이트시에는 편집기의 편집아이콘까지 모두 안보여지는 문제등이 발생하여 그다지 추천하고 싶지 않기 때문입니다.
하지만 굳이 시도를 해보시겠다면 아래의 관련 링크를 참조해 보시면 되겠습니다.
관련 참조 링크 : 웹디자인 & 포토샵- 관리자화면 나눔고딕적용관련
- 워드프레스 테마 오픈마켓 테마포레스트- Theme forest
- 워드프레스 추천테마 관련 포스트 - AVADA / JARIDA / SAHIFA / GOODNEWS
24 Comments
silva
안녕하세요. 알려주신대로 1,2,3번을 실시했는데 아무런 변함이 없습니다.
테마는 기본테마인 twelve fourteen을 사용중입니다.
1번에서 설명해주신 대로 적용했으나, 이상하게도 한 글자도 바뀌지가 않았습니다.
3번에서는 custom-editior-style.css를 note pad로 새문서를 만들고 알려주신 코드를 붙여넣은 후, 저장해서 테마 루트에 업로드했습니다. 그 후 funtion.php에도 알려주신 코드를 입력-저장했습니다. 흠.. 무엇이 문제일까요..?ㅜ
Giantt
사이트 주소를 알려주시면 한번 확인해드리도록 하겠습니다.
랭커블로그
크롬 브라우저에서는 나눔고딕이 적용이 안되고 굴림으로 적용이 되는데… 혹시 원인이 뭔지 알 수 있을까요? 웹폰트 적용은 안했구요(나눔고딕이 깔려 있으므로), 그냥 CSS 에서 폰트를 나눔고딕으로 설정했는데 크롬에서만 CSS 설정을 무시하고 굴림으로 표시되네요. ㅠㅠ
Giantt
운영하시는 랭커블로그를 방문하여 본문 폰트 요소검사를 했을경우 다음과 같이 나옵니다.
font: 12px/1.8 NanumGothic, ‘나눔고딕’, ‘Malgun Gothic’, ‘맑은 고딕’, gulim, ‘굴림’, dotum, ‘돋움’, AppleGothic, sans-serif;
맑은 고딕,굴림,돋음체등을 사용하지 않는다면 삭제 해주시고 ”Nanum Gothic”,”NanumGothic” (한칸 분리)해서 적용해 보시면 어떨까 합니다.
또한 Font-family 등의 항목을 검색하면서 나눔고딕 폰트가 적용되지 않은 곳이 있는지도 점검해 보시면 되실것 같습니다.
랭커블로그
답변 감사합니다. 그런데, 말씀하신대로 적용해 보아도 여전히 크롬에서만 안됩니다.
즉, 크롬을 제외한 다른 브라우저에서 폰트를 확인하면 나눔고딕으로 적용이 되어 있는데, 유독 크롬 브라우저에서만 굴림으로 보입니다. ㅠㅠ
익명
크롬 캐시가 적용된 것이 아닐까요?
앵그리피그
기본편집기를 나눔폰트 설정을 해보고 있습니다. 내용중에 테마 루트에 넣으라고 하셧는데 wp-contents>theme>테마이름> 여기에 설치하면되나요?
Giantt
Custom-editor-style.css 파일은 wp-content/themes/사용테마명/ 폴더에 FTP 프로그램을 이용하여 저장하시면 됩니다.
앵그리피그
그리고 function.php 파일에 어느 위치에 코드 삽입을 하면되나요 위치는 상관없나요
적용을 햇으나 안되서요 ㅎㅎ
Giantt
위치는 상관없으나 상단쪽에 넣어두시면 확인 쉬우니 상단에 배치해두시면 좋을듯 합니다. 하단 처럼 주석을 달아두시면 더 쉽게 확인이 가능하겠습니다.
물론
시노
감사합니다. 예전에 오류때문에 안바뀌던 부분도 저 방법대로 하니 제대로 바뀌였네요 ㅎ
Giantt
네 문제해결하시는데 제 포스트가 도움이 되셨다니 기분이 좋네요… ^^ 감사합니다.
jh_song
좋은 정보 감사합니다. 감사 인사라도 전하고자 이렇게 남깁니다. 🙂 즐거운 하루 되세요!
Giantt
네.. 감사합니다. ^^
대흠
좋은 정보 감사합니다!!
근데 폰트 사이즈는 어떻게 조절하나요?
Giantt
font-size : 10 px 처럼 폰트 크기 조절항목에서 10 등의 숫자를 변경하시면 됩니다.
익명
잘되네요 ㅎㅎ 고맙습니다 잘쓰고 있습니다
Giantt
네.. 잘 적용되셨다니.. 다행이네요. ^^
나그네
감사합니다. 덕분에 예쁜 사이트 만들었습니다.
Giantt
넵.. 사이트 잘 운영하시기 바랍니다. ^^
이인재
안녕하세요. 도움 많이 얻고 있습니다.
혹시 다음과 같은 소스를 css에 적용하여 쓰고 있는데, 크롬에서만 bold 가 적용되지 않는 이유를 알 수 있을까요? 크롬에서만 익스, 사파리다 괜찮은데 크롬만 font-weight가 전혀 먹히지 않습니다. 도움 요청드릴 수 있을까요?
@import url(“http://fonts.googleapis.com/earlyaccess/nanumgothic.css” ) ;
body, h1, h2, h3, h4, h5, h6, li, p { font-family:”Nanum Gothic”,”NanumGothic” }
body, h1, h2, h3, h4, h5, h6, p, a, p, div, span, ul, li {
font-family: ‘Nanum Gothic’, sans-serif;
}
Giantt
테마의 특성상 광역으로 특성지정한 것이 적용되지 않을수 있습니다. 이러한 경우는 해당 영역에 대한 부분의 소스를 찾아 부분적으로 적용해주셔야 하겠습니다.
(2)번 항목을 참조해보시면 되겠습니다.
익명
안녕하세요. 이건 다른 이야기인데 제가 일본선교사님 교회홈페이지 만들고 있는데 일본웹폰트 적용하려고 하는데 어떻게 하는지 가르쳐 주실수 있나요?
Giantt
본문에서 설명드린 방법대로 그대로 하시면 됩니다. 다만 폰트의 종류를 나눔고딕이 아니라 NotoSans 폰트로 대체하여 사용하시면 되겠습니다. 구글과 어도비가 공동개발한 폰트로 한중일 폰트를 모두 지원하는 타입니다.
http://giantt.co.kr/6104
상기 게시물 참조해보세요