프로그램 연습
2026-01-31 Sat

로그인

검색

ckeditor

rhymix (XE) - ckeditor에 Google Fonts 넣는 방법

Extra Form
출처 https://fonts.google.com/

구글폰트 Hi MelodyGoogle Fonts - Hi Melody 넣기 

구글폰트에서 제공하는 예쁜 한글 글꼴 Hi Melody를 Rhymix 홈페이지에 넣어 보도록 하겠습니다. Rhymix 웹편집기 ckeditor와 조합하여 언제든 게시글에 예쁜 구글폰트를 넣을 수 있습니다. 

 

1. 구글폰트를 검색해서 원하는 폰트를 찾습니다. → Google Fonts 
 

2. 원하는 글꼴을 선택하여 확인해 보면 오른쪽에 [ Select ... + ] 버튼이 보입니다. 이 버튼을 클릭해 주세요. 
   장바구니에 담는 버튼 입니다. 

2023-11-18121558.png

 

3. 오른쪽 상단의 View selected families 아이콘을 클릭합니다. 

2023-11-18115146.png

 

4. 웹에 등록하는 방식을 선택합니다. Rhymix 에서는 Layout에 삽입할 때 CSS에 등록할 수 있습니다. 
    @import 를 선택하여 소스코드를 복사합니다. 

2023-11-18115412.png

 

5. Rhymix 의 관리자 화면으로 들어가서, 레이아웃 설정화면 → HTML/CSS 항목의 CSS -layout.css 부분 입력란에 
    @import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap'); 부분만 넣어주고 저장합니다. 

    다른 글꼴도 같이 사용한다면 아래와 같이 &로 이어줍니다. 
    @import url('https://fonts.googleapis.com/css2?family=Hi+Melody&family=Gugi&family=Imperial+Script&display=swap');

 

   이렇게 하면 Rhymix 에서 기본적으로 해당 글꼴로 설정된 내용이 원하는 글꼴로 표현 됩니다. 
 


이제 ckeditor 에서 글꼴을 사용할 수있도록 설정합니다. 

6. Rhymix root/common/js/plugins/ckeditor/ckeditor.config.js 파일에 아래와 같이 표현할글꼴이름/글꼴명 을 넣어 설정해 줍니다. 

config.font_names = "맑은 고딕/맑은 고딕,Malgun Gothic;Meiryo;하이멜로디/Hi Melody;Neonderthaw/Neonderthaw;" 

 

이렇게 하면 웹편집기에서도 원하는 글꼴을 선택하여 게시글을 작성할수 있게 됩니다. 

2023-11-18121007.png

목록
위로 아래로 게시글 수정 내역 댓글로 가기 첨부
Category
  1. 26
    Dec 2025
    11:24

    stickers v3.0

    😀 stickers Ckeditor 4 Plugins stickers Add-on installation instructions If you want to add the plugin manually, you will need to: 1. Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example: http://e...
    Read More
  2. 26
    Dec 2025
    00:08

    glasspannel - 글래스모피즘 패널 생성기

    glasspannel 글래스모피즘이 적용된 반투명한 패널을 만들어 줍니다. 설치경로 : /plugins/glasspannel/ config.js 추가 config.extraPlugins = 'glasspannel'; addButton : 'GlassPannel' Download : glasspannel_v1.0.zip - unsplash API 적용, 배경이미지 ...
    Read More
  3. 25
    Dec 2025
    23:49

    rainbowcode - Code Snippet과 Syntex Highlight 을 적용한 소스코드 입력을 위한 플러그인

    rainbowcode CKEditor 플러그인 소스코드를 본문에 입력할 수 있는 Code Snippet 플러그인으로 Syntex Highlight를 적용하여 문법에 따른 색상값을 적용하여 소스코드 구분이 쉽다. 의존 플러그인 : 아래 플러그인이 같이 설치되어 있어야 함. - lineutils - w...
    Read More
  4. 18
    Dec 2025
    21:40

    CKEditor 4 Toolbar 접고/펴기

    CKEditor 4 의 Toolbar 를 접었다 폈다 할 수 있는 아이콘을 만들고, 기본 상태를 설정합니다. 바로 이렇게요. config.js 파일에 아래의 내용을 추가합니다. // 툴바 접고 펴기 config.toolbarCanCollapse = true; config.toolbarStartupExpanded = true;
    Read More
  5. 18
    Nov 2023
    11:24

    rhymix (XE) - ckeditor에 Google Fonts 넣는 방법

    Google Fonts - Hi Melody 넣기 구글폰트에서 제공하는 예쁜 한글 글꼴 Hi Melody를 Rhymix 홈페이지에 넣어 보도록 하겠습니다. Rhymix 웹편집기 ckeditor와 조합하여 언제든 게시글에 예쁜 구글폰트를 넣을 수 있습니다. 1. 구글폰트를 검색해서 원하는 폰트...
    Read More
  6. 08
    Jul 2023
    09:33

    Plugins / Font Awesome fortyTwo(fa42)

    Font Awesome fortyTwo ckeditor Plugins fa42 적용 방법입니다. fa42 는 Font-awesome 최신버전인 6.4.0 을 적용할 수 있습니다. Font-awesome 의 버전이 어떤 의미가 있는지 모르지만 최신 경향이 반영된 아이콘이 추가되었거나 그런정도의 차이가 있을 듯 ...
    Read More
  7. 30
    Dec 2021
    12:57

    Rhymix 에서 CSS 로 배경이미지(body) 적용시 CKeditor4 입력창에도 배경이 들어가는 문제

    Rhymix 에서 body 스타일에 배경이미지를 적용하면 body 스타일이 CKeditor 입력란에도 적용되어 버림. Rhymix/modules/editor/skins/ckeditor/css/default.less 파일의 .cke_wysiwyg_div 스타일에 background 스타일을 적용하면 해당 색상으로 입력란 배경이 ...
    Read More
  8. 28
    Dec 2021
    22:13

    ckeditor 색상 값 정리

    root/modules/editor/skins/ckeditor/css/default.css body.cke_editable { padding: 5px; background-color: transparent; } // html.cke_panel_container, html.cke_panel_container body { background-color: transparent; }
    Read More
  9. 17
    Sep 2021
    15:46

    Ckeditor Toolbar 등록 이름

    // Toolbar configuration generated automatically by the editor based on config.toolbarGroups. config.toolbar = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'ExportPdf', 'Preview...
    Read More
Board Pagination Prev 1 Next
/ 1