워드프레스 쉽게 나눔바른고딕, 넣는법 

오늘 메일로 워드프레스 한글폰트 넣는 법을 문의 받았습니다.

답변 드렸지요... ^^; 

한글 폰트 쉽게 넣는 법을 알려드립니다. ^^;

많은 워드프레스 테마에서 custom.css 를 지원하는 옵션이 기본으로 있습니다. 

(테마가 업데이트 되기 때문에 style.css를 바꾸면 계속 업데이트 되니까... ^^; )

테마 옵션의 custom.css. 넣는 곳에 아래의 구문을 넣습니다. 

그럼 바로 한글이 나눔바른고딕이 됩니다.

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@import url("http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css"); 

body, h1, h2, h3, h4, h5, h6, p, a, p, div, span, ul, li {

    font-family: arial, '나눔바른고딕', 'Nanum Barun Gothic', 나눔고딕,"Nanum Gothic", 맑은 고딕  !important;

}

나눔바른고딕이 싫으시면 볼드체로 되어 있는 것을 빼면 바로 나눔고딕이 먹지요.. ^^; 

알면 쉽고 모르면 맨"땅에 헤딩하는 워드프레스 한글 폰트 였습니다.

LIG손해보험 성북지점 LC 조영달(010-5364-3056 잔머리)이였습니다. 

워드프레스 모르시는 것 있으시거나, 

화재, 자동차, 실손, 암보험 등등 필요하시면 연락주세요. ^^;

테스트 결과 

h1 은 18t, h2 13.5pt, h3 : 10.5pt, h4 : 9pt, h5, h6 : 7.5pt 이네요... ^^; 

21px, 18.5px, 13.5px, 12px, 10.5px로 변환이 되네요... 

확인해보니 폰트의 크기를 나누는데는 PT 와 PX가 있는데 차이가 있다는데 확인해서 써야 할 꺼 같습니다.. .

 그래서 확인해보니 웹폰트를 쓸 때 pt와 px 사이에는 어떤 함수관계가 있느냐? 

 

보통은 다음의 식과 같다고 합니다. 

 

정석 　　Npt = (N+3)px (단, N은 자연수) 

 

헉... .수학식~~~~ .하지만 어렵지 않으니.. .. ^^; 

 

예를 들어 H1 은 18pt=(18+3)px=21px    ->>> 더하기만 할수 있으면 쉽네요... 

 

http://cafe.naver.com/font1.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=14709 를 보시면 정확히 아실수 있을 껍니다.

 

(다음에서 웹표준을 알려주는 사이트를 보니 쉽게 나오네요.. )

CSS Font-Size Comparative Table

Points	Pixels	Ems	Percent	Point (Photoshop) / Gulim	Point (Photoshop) / Dotum
6pt	8px	0.5em	50%	8pt, 9pt	8pt
7pt	9px	0.55em	55%	10pt	9pt, 10pt
7.5pt	10px	0.625em	62.5%	11pt	11pt
8pt	11px	0.7em	70%	12pt, 13pt	12pt
9pt	12px	0.75em	75%	14pt	x
10pt	13px	0.8em	80%	15pt	13pt
10.5pt	14px	0.875em	87.5%	16pt, 17pt	14pt, 15pt
11pt	15px	0.95em	95%	18pt	16pt
12pt	16px	1em	100%	19pt	17pt
13pt	17px	1.05em	105%	20pt, 21pt	18pt, 19pt
13.5pt	18px	1.125em	112.5%	x	20pt
14pt	19px	1.2em	120%	22pt	21pt
14.5pt	20px	1.25em	125%	23pt	22pt
15pt	21px	1.3em	130%	24pt	x
16pt	22px	1.4em	140%	25pt, 26pt	23pt, 24pt
17pt	23px	1.45em	145%	27pt	x
18pt	24px	1.5em	150%	28pt	25pt

[출처 : http://ui.daum.net/convention/css/css_grammar]

워드프레스 홈페이지에서 h 태그 설정을 해놓는 타이포그래피를 중요시 해야되기때문에.. 네이버 블로그는 어떻게 하나 궁금해서.. 한번 걍.. .테스트 해 봤습니다. 

 

오늘도 쓸데 없는데... 신경을 쓰는 잔머리였습니다. 

구글웹폰트 api를 이용하여 나눔폰트 적용하기

아래 코드를 style.css 파일 상단에 넣고, 폰트를 적용하고 싶은 클래스에 각각 나눔폰트를 지정해주면 됩니다.