1. Avada-Child-Theme 활성화

• tinymce가 UI를 구성하기 전에 폰트정보를 읽어들이려면, 해당 시점에 커스텀 폰트를 로딩할 확장포인트가 필요한데, 보통 이럴 경우에는, 테마를 직접 수정하지 않고 child theme 라는 것을 이용하면 원본 테마의 버전업 등 변경여부에 관계 없이 원본 테마의 기능을 override 할 수 있다고 한다.
• 기존에 avada 테마를 설치한 경로에, 최초 avada 다운로드시 함께 첨부되었던 Avada-Child-Theme 를 설치한다.
• 설치되었으면 워드프레스 관리자 메뉴 > 테마 에서 child theme 를 확인하고 활성화 한다.

2. 커스텀 웹폰트 css를 편집

• 1. 의 과정을 통해서 커스텀 폰트는 워드프레스의 uploads 디렉토리에 업로드 되었을 것이다. 업로드 된 파일의 경로를 웹폰트 css 에 업데이트 하고, 해당 css 파일도 같은 uploads 디렉토리에 업로드하여 css파일을 브라우저로 호출해 테스트 해 보자.

3. child theme 폴더 내의 functions.php 를 열고 아래 구문을 추가하자.

function load_custom_fonts($init) {

    $stylesheet_url = 'http://워드프레스주소/wp-content/uploads/.../d2coding.css';  // 웹폰트 css url
  
    if(empty($init['content_css'])) {  // Note #2
        $init['content_css'] = $stylesheet_url;
    } else {
        $init['content_css'] = $init['content_css'].','.$stylesheet_url;
    }
  
    $font_formats = isset($init['font_formats']) ? $init['font_formats'] : 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';  // Note #1
    $custom_fonts = ';'.'D2Coding=d2coding';  // 커스텀 웹폰트 이름 설정 추가 (tinyMCE 콤보박스용)
    $init['font_formats'] = $font_formats . $custom_fonts;
    
  return $init;
}

add_filter('tiny_mce_before_init', 'load_custom_fonts');

4. 남은 문제점

• 보통 기본 폰트로 편집을 하면, 제목1. 제목2 등 단락을 선택하면 폰트 사이즈가 자동으로 해당 depth 에 맞게 변경이 되는데, 커스텀 웹폰트를 사용하니, 이 부분이 작동하지 않았다.
  이건 잘 모르겠네 ㅋ

5. 참고 링크

http://learn.wpeditpro.com/adding-new-wordpress-tinymce-fonts/

굉장히 잘 쓰여진 문서. 대부분에 이곳을 참고함.