워드프레스 Noto sans kr / 나눔바른고딕 적용

css 파일 

http://fonts.googleapis.com/earlyaccess/notosanskr.css

아바다 테마에

폰트 적용

https://avada.kr/avada-manual/using-nanum-gothic-in-wordpress-avada-theme/

1)영문 폰트 상관없을 때

아바다테마에서 Noto Sans KR을 적용하는 가장 쉬운 방법은
차일드 테마내의 style.css 파일 최상단에

1 2	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); body,h1,h2,h3,h4,h5,h6,li,a,textarea,p,span,dl,dt,dd,td,th,button,strong,label,input { font-family: dashicons,IcoMoon,'Noto Sans KR'!important; }

를 삽입하는것입니다.(빠진 태그때문에 적용되지 않는것은 찾아서 더 넣으면 됩니다. dashicons 과 IcoMoon이 먼저 정의되는것은 워드프레스 관리자 단의 아이콘과 아바다테마의 아이콘때문입니다. 다른 테마에 적용시에는 이것을 빼면됩니다. )

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

body,h1,h2,h3,h4,h5,h6,li,a,textarea,p,span,dl,dt,dd,td,th,button,strong,label,input { font-family:'Noto Sans KR'!important; }

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

@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

body,h1,h2,h3,h4,h5,h6,li,a,textarea,p,span,dl,dt,dd,td,th,button,strong,label,input {

font-family: dashicons,"Noto Sans KR" !important; 

}

아바다테마에서 나눔바른고딕을 적용시

1 2

@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,li,a,textarea,p,span,dl,dt,dd,td,th,button,strong,label,input { font-family: ARIAL, ‘나눔바른고딕’, ‘NANUM BARUN GOTHIC’, 나눔고딕, “NANUM GOTHIC”, 맑은 고딕 !IMPORTANT; }

(차일드 테마 만드는법)

2)영문 폰트 구분 할 때

한글에서는 나눔고딕을 적용하고 , 영문에서는 아바다 테마 옵션에서 설정한 구글폰트를 지정하고 싶은 경우에는
차일드 테마내의 style.css 파일 최상단에

1 2	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); body,h1,h2,h3,h4,h5,h6,li,a,textarea,p,span,dl,dt,dd,td,th,button,strong,label,input { font-family: dashicons, IcoMoon,'구글영문폰트이름','Noto Sans KR'!important; }

를 삽입합니다.(빠진 태그때문에 적용되지 않는것은 찾아서 더 넣으면 됩니다. 영문폰트에 해당하는 폰트 패밀리 값을 나눔고딕 폰트패밀리보다 앞에 지정합니다.)

2.차일드 테마가 없는경우

만약 차일드 테마를 적용하지 않았다면 다음과 같이 하면 됩니다.

‘테마옵션-Advanced-Code Fields (Tracking etc.)-Space before </head>’ 로 가서 그 칸에 다음줄을 입력합니다.

1	<link href="http://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet" type="text/css">

그리고 나서 ‘테마옵션-Custom CSS-CSS Code’ 칸에

1	body,h1,h2,h3,h4,h5,h6,li,a,textarea,p,span,dl,dt,dd,td,th,button,strong,label,input { font-family: dashicons,IcoMoon,'Noto Sans KR'!important; }

을 입력합니다. (빠진 태그때문에 적용되지 않는것은 찾아서 더 넣으면 됩니다.)

3.특정 부분에 특정 폰트웨이트 지정방법

특정 부분의 font-weight를 바꾸는 방법은 적용하고 싶은 곳을 선택자를 찾아서, 폰트와 폰트 웨이트를 지정해 주면 됩니다.

h1에만 나눔고딕 볼드 적용하는 방법

1 2	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); h1 { font-family: dashicons,IcoMoon,'Noto Sans KR' !important ; font-weight:700 !important;}

메뉴에만 나눔고딕 볼드를 적용하는 방법

1 2	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); .menu { font-family: dashicons, IcoMoon,'Noto Sans KR' !important ; font-weight:700 !important;}

* 선택자 (위에서는 h1 와 .menu )를 바꾸거나 원하는 곳을 추가 하면 해당 폰트만 바꿀수 있습니다.
* 위와 같이 폰트패밀리와 폰트웨이트 뒤에 ‘꼭’ !important 를 붙여 주어야 합니다.

참고-아바다 테마 버전 4.0 이전 버전

차일드 테마내의 style.css 파일에

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

를 삽입합니다.

ftp로 나의 계정에 접속한후 wp-content/themes/Avada/framework/admin/functions/functions.options.php 파일을 에디터로 엽니다.
아래의 그림과 같이 파일의 86번쯤( 업데이트될때마다 다르지만) ‘None’ 및에

1	"Nanum Gothic" => "Nanum Gothic",

을 추가합니다.

이후 사이트의 관리자 화면에 가서 테마옵션-Typography- Google Font 에 가서 추가한 Nanum Gothic을 선택하여 사용합니다.

* 이 방법은 테마를 업데이트 할때마다 다시 적용해 주어야 해서(해당 파일이 사라지므로) 살짝 불편합니다. 하지만 4.0버전 이전에서는 이방법이 가장 잘 적용됩니다.