워드프레스 아바다 테마 에서 나눔고딕 사용하기

Home/아바다 테마 사용법/워드프레스 아바다 테마 에서 나눔고딕 사용하기




1.차일드 테마가 있는경우

1)영문 폰트 상관없을 때

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

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

2)영문 폰트 구분 할 때

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

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

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

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

‘테마옵션-고급설정-코드입력(트래킹 코드 등)-헤드태그 안쪽’ 으로 가서 그 칸에 다음줄을 입력합니다.

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

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

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

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

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

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

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

나눔고딕 이외의 폰트사용은 아래의 것중 하나를 불러옵니다.

나눔브러시 스크립트 : @import url(‘https://fonts.googleapis.com/css?family=Nanum+Brush+Script&subset=korean’);
나눔고딕 코딩 : @import url(‘https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding:400,700&subset=korean’);
나눔 명조 : @import url(‘https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700&subset=korean’);
나눔 펜 스크립트 : @import url(‘https://fonts.googleapis.com/css?family=Nanum+Pen+Script&subset=korean’);

나눔폰트의 폰트웨이트 종류

* Nanum Brush Script – font-weight : 400 Regular (1종)
* Nanum Gothic – font-weight : 800 ExtraBold , 700 Bold ,400 Regular (3종)
* Nanum Gothic Coding – font-weight : 700 Bold ,400 Regular (2종)
* Nanum Myeongjo – font-weight : 800 ExtraBold , 700 Bold ,400 Regular (3종)
* Nanum Pen Script – font-weight : 400 Regular (1종)

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

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

를 삽입합니다.

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

을 추가합니다.

using-nanum-gothic-in-wordpress-avada-theme_01

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

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







23 Comments

  1. 최선우 2018/03/06 - 03:55 - 답글쓰기

    초보들이 사용하기 편하게 자세하게 적어주신 정보들 덕분에 편하게 잘쓰고있습니다.

    다른분들도 같은지 모르겠지만 제가 적용해서 사용하다보니 슬라이더 등의 부분에서 아이콘이 깨져서 나오더라구요.

    body,h1,h2,h3,h4,h5,h6,li,a,textarea,p,span,dl,dt,dd,td,th,button,strong,label,input { font-family: dashicons,’Nanum Gothic’,IcoMoon !important; }
    제 경우에는 나눔고딕 폰트가 IcoMoon보다 먼저 불러와지면 아이콘이 깨져서 나왔습니다.

    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, ‘Nanum Gothic’ !important; }

    나눔고딕을 뒤로 미루고 IcoMoon을 먼저 정의해주니 해결되었습니다.

  2. fi 2018/02/17 - 04:15 - 답글쓰기

    아다바 테마 사용중인데…
    h1 { font-family: dashicons,’Nanum Gothic’ ,IcoMoon !important ; font-weight:700 !important;}
    이렇게 작성하면 한글 폰트가 나눔고딕이 아닌 dashicons로 적용됩니다.
    dashicons를 지우고 나니 정상 적용 되네요.
    크롬에서 whatFont 플러그인을 통해 확인했습니다.
    아무래도 확인이 필요한 내용인 것 같습니다.

    • 이명성 2018/02/19 - 16:57 - 답글쓰기

      고맙습니다.
      정정 했습니다.
      ^^

  3. mariv 2018/02/14 - 18:27 - 답글쓰기

    안녕하세요, 아바다 테마 업그레이드 후부터인것 같은데… 텍스트가 모두 붙어서 나와요.. 띄어쓰기가 하나도 안먹히고 있던 띄어쓰기도 다 없어졌어요.. 어떤 부분을 봐야 할까요..ㅠ

    • 이명성 2018/02/19 - 16:54 - 답글쓰기

      바로 아래의 댓글과 마찮가지 문제일 겁니다.

      @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.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,’Nanum Gothic’ !important; }
      .fusion-main-menu .fusion-main-menu-search a, .searchform .search-table .search-button input[type=submit] {font-family:icomoon !important;}

      과 같이 icomoon을 분기해서 적용 해 보세요.

      • Richard 2018/02/20 - 11:07 - 답글쓰기

        많은 도음 받고 있습니다.
        PC에서는 정상적인데 핸드폰에서만 붙어서 나오는데
        해결방안이 있을까요?

  4. Min soo 2018/02/13 - 15:16 - 답글쓰기

    정확히 어느 버전부터인지는 모르겠으나
    나눔고딕 적용시, 크롬에서 띄어쓰기가 안되는 문제가 있네요.
    icomoon을 빼면 띄어쓰기가 정상적입니다만, icomoon을 뺄수는 없어서 그게 문제 입니다.

    혹시 해결책이 있을까요?

    • 이명성 2018/02/19 - 16:51 - 답글쓰기

      최근버전에 나타난 현상입니다.
      일단 icomoon을 빼신후에 현재 사용중인 사이트에서 깨진 폰트를 찾아 icomoon을 따로 적용해 주면됩니다.

      일례로 가장 빈번한 문제가 검색창의 돋보기 아이콘 문제인데.
      일단 icomoon을 빼시고,

      .fusion-main-menu .fusion-main-menu-search a, .searchform .search-table .search-button input[type=submit] {font-family:icomoon !important;}
      를 따로 입력 해 주시면 됩니다.

  5. phpdev 2017/12/12 - 13:59 - 답글쓰기

    폰트에 문제가 있네요~ 아래코드롤 변경해주세요.

    아래줄을
    @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

    아래줄로 변경하면 정상적으로 나옵니다
    @import “http://fonts.googleapis.com/earlyaccess/nanumgothic.css”;
    @import “http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css”;

    • 이명성 2017/12/26 - 13:27 - 답글쓰기

      어떤 방식으로 적용하시고, 어떤 브라우저에서 비정상 적으로 나타났는지 모르겠습니다마…
      위에 적으신 코드가 표준입니다.

  6. Giselle 2017/10/26 - 16:32 - 답글쓰기

    안녕하세요. 아바다는 한글과 영문 폰트만 지원하나요? 중국어로 된 홈페이지 제작을 해야 되는데 아바다에서도 중국어로 제작이 가능하다면 구입하려고 합니다. 아바다에서 중국어(한문)로 된 홈페이지 제작 가능한가요?

    • 이명성 2017/11/01 - 21:31 - 답글쓰기

      워드프레스가 대부분의 언어를 지원하므로 중국어로된 웹사이트도 만들 수 있습니다.
      다만 아바다 테마 뿐만아니라 워드프레스에서 사용되는 대부분의 테마나 플러그인이 영어 이외의 언어는 사용자에 의해 자발적인 번역되어 공유된것이 없다면, 사용자가 직접 번역해서 사용해야 합니다.

  7. 손병기 2017/01/09 - 14:42 - 답글쓰기

    안녕하세요 저희가 한글버젼을 구입하여 사용하는 중인데
    혹시 페이지 텍스트 작성중에 엔터를 쳤을경우 줄간격을 줄이는 방법을 알 수 있을까요 ?

    • 이명성 2017/01/25 - 12:54 - 답글쓰기

      에디터에서 엔터를 치면 문단바꿈 입니다.(p태그가 분리되는 구간)
      단순 줄바꿈을 하려면 shift + 엔터 하시면 됩니다.

  8. 김효남 2016/08/05 - 11:39 - 답글쓰기

    좋은 정보감사합니다.

    특이 사항이 있어서 아래에 적어 봅니다.

    차일드 테마 사용시 style.css에 아래의 1번 내용을 적용하면 제 자리에서는 폰트가 적용안되고요. 2번의 방법을 사용하니 변경이 되었습니다.

    1. @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); <– 적용안됨
    2. @import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css&#039;); <– http: 와 따롬표로 감싸이 정상 작동했습니다

    • 이명성 2016/08/05 - 12:41 - 답글쓰기

      그렇군요

      프로토콜을 적지않는 방법도 정식 사용법이고, 따옴표를 넣지 않아도 인식합니다만…
      그렇지 않은 경우였나 봅니다.
      서버의 환경등에도 차이가 있는것 같습니다.

      좋은 정보 감사드립니다.

  9. 안동백 2015/02/22 - 18:41 - 답글쓰기

    오늘 크롬 요소 검사로 확인하니까
    http://fonts.googleapis.com/css?family=Nanum+Gothic: Failed to load resource: the server responded with a status of 400 (Bad Request)
    요런 헤더에 요런 에러가 뜨는데 그럼 나눔고딕 로딩 못하는 것이지요? 문제가 뭔지 모르겠네요.

    • Avada:KR 2015/02/22 - 21:31 - 답글쓰기

      일단 해당경로가 없는 경로로 나오니까… 로딩이 안되는 거겠죠
      어디에 그 경로를 넣으셨는지는 모르겠지만…
      경로를
      //fonts.googleapis.com/earlyaccess/nanumgothic.css

      로 바꿔서 한번 해 보세요

  10. 안동백 2015/02/18 - 15:56 - 답글쓰기

    이글대로 하니까 아이콘이 다깨지고 난리도 아니네요.
    한참 헤메다가 다른 방법보고 하니까 그제서야 됩니다. 업데이트 부탁드려요.

    • Avada:KR 2015/02/21 - 15:08 - 답글쓰기

      네 그렇군요 ^^;;

      어떻게 하면 간편하게 아바다 테마에 나눔고딕을 적용할 수 있을까만 생각하다가…
      아이콘을 간과 했습니다.

      새로 업데이트 했습니다.
      이번에는 잘 활용이 되었으면 좋겠습니다.

      조언 주셔서 감사합니다.

    • yeyoung 2017/05/15 - 00:46 - 답글쓰기

      안녕하세요 저도 아이콘이 깨졌는데 방법 좀 알려주시면 너무 감사하겠어요~~ ㅠㅠ

      • 이명성 2017/05/21 - 23:51 - 답글쓰기

        아다바 테마라면 위에서 적은것과 같이 적용하시면 정상적으로 동작 합니다.
        (단 브라우저 캐시 완전히 지우셔야 합니다.) ^^;;

댓글 쓰기