https://drive.google.com/drive/folders/178D5RRjRdmYzb9reTsY8gh0OTrdvWaaQ?usp=sharing
- NotoColorEmoji.ttf
- NotoEmoji-Regular.ttf
댓글(0) 남기기...웹폰트 만들어 직접 서비스 적용하기
- https://onlinefontconverter.com/ 웹사이트에 들어갑니다.
- 아래 그림과 같이 변환할 폰트파일을 업로드 합니다.
- ① font-face, eot, svg, ttf, woff, woff2 에 체크합니다.
- ② SELECT FONT(S) 를 클릭하여 ③ ttf 폰트를 업로드 합니다.
- ④ Done 를 클릭하여 계속 진행 합니다.(변환을 시작하고, 잠시 기다립니다.)
- ⑤ 변환이 완료되면 SAVE YOUR FONT 를 클릭합니다.
- ⑥ Download Attachment 를 클릭해서 파일을 다운받습니다.
- 아래 그림과 같이 변환할 폰트파일을 업로드 합니다.
- 다운 받은 onlinefontconverter.com.zip 파일의 압축을 해제하면 아래와 같이 6개의 파일이 생성됩니다.
이 파일을 모두 웹서버의 웹폰트 폴더에 업로드 합니다. - 웹 페이지 헤더부분의 폰트를 읽어 들이는 부분에 font.css 를 포함시킵니다.
예1) ckeditor 의 경우 config.js 에
config.contentsCss = 'https://서버경로/font.css';
예2) XE 의 경우 관리페이지> 에디터 > 공통설정의 CSS 파일 추가 에
https://서버경로/font.css
예3) ckeditor 의 config.js 에 글꼴을 추가합니다.
config.font_names = '맑은 고딕;...;어비스윝/UhBee swit;' + CKEDITOR.config.font_names;
구글 웹폰트를 XE(라이믹스) + CKEditor 에 적용하는 방법입니다.
- XE 관리페이지 > 디자인 > 레이아웃 > HTML/CSS >> CSS - layout.css 부분에
구글 웹폰트를 import 합니다.@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); -
xe/modules/editor/styles/default/editor.css 파일 맨 위에도 1. 과 동일하게 넣어 주세요.
※ 이 부분은 편집시 편집기의 도우모음에 표시되는 글꼴과 편집창의 글꼴모양을 표현해 줍니다.
-
xe/common/js/plugins/ckeditor/ckeditor/config.js 파일의 폰트 설정 부분에 해당하는 글꼴을 넣어 줍니다.
config.font_names = '나눔손글씨 붓/Nanum Brush Script;나눔손글씨 펜/Nanum Pen Script;제주한라산/Jeju Hallasan;노토산스 한글/Noto Sans KR;' + CKEDITOR.config.font_names; -
xe/common/js/plugins/ckeditor/ckeditor/skins/moono-dark/editor.css 파일과 관련된 파일 상단에 아래 내용 추가
@import url('//fonts.googleapis.com/css?family=Nanum+Brush+Script|Nanum+Pen+Script|Yeon+Sung|Nanum+Myeongjo|Dancing+Script|Indie+Flower|Macondo|Akronim|Allura|Paytone+One|Work+Sans:900');
3. (20180629)