DJango - Add custom font to Ckeditor

Question

I want to add my font to CKEditor. I spent a time for searching in internet but all solutions not working for me.after using this question added font label to combobox but my text not changed after selecting font.

this is my code

ckeditor/config.js

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.contentsCss = 'fonts.css';
    config.font_names = 'BBCNassim;' + config.font_names;
};

ckeditor/fonts.css

@font-face {  
    font-family: 'BBCNassim';  
    src: url( ../fonts/BBCNassim.TTF );
    src: local("BBCNassim"), url("../fonts/BBCNassim.TTF") format("truetype");  
}

and directory of BBCNassim.TTF is ckeditor/fonts/BBCNassim.TTF

Edited.

I saw my browser requests(status = 404). my site can not load fonts.css. i using django framework.

browser loaded http://127.0.01:8000/admin/app/post/2/fonts.css.

Answer 1

I am used django-text-ckeditor and djangocms. I had exactly same issue. Please attend to steps and do them step by step.

1. Use Ctrl + Shift + T open terminal.
2. go to project directory and active your virtualenv if you use virtualenv.
3. type python manage.py shell
4. then type from django.conf import settings
5. then type settings.CKEDITOR_SETTINGS to see default django-text-ckeditor settings. this setting is similar this:

CKEDITOR_SETTINGS = {
    'allowedContent': True,
    'autoParagraph': False,
    'baseHref': '/media/',
    'enterMode': 'CKEDITOR.ENTER_BR',
    'extraAllowedContent': 'style;*;*{*}',
    'filebrowserImageBrowseUrl': '/filebrowser/',
    'language': '{{ language }}',
    'removePlugins': 'stylesheetparser,about,showblocks,language,form,flash,iframe',
    'skin': 'moonocolor',
    'toolbar': 'toolbar_Basic',
}

6. now you can define CKEDITOR_SETTINGS in your settings.py and override it.
7. now you need to add font_names key to CKEDITOR_SETTINGS similar this: CKEDITOR_SETTINGS = { ..., ..., 'font_names': 'IRANSans; Yekan; Bnasim; Bkoodak;, ..., } If you do this 7 step, fonts combo initialized with custom font names. I kow you do this correctly.

Note that if you have these fonts in statics and theme defined in your css by @font-face you can use fonts in ckeditor. For example this is my farsifonts.css that my fonts defined in it:

@font-face {
    font-family: 'Droid Arabic Naskh';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/DriodArabicNaskh/Regular/DroidNaskh-Regular.eot');
    src: url('../fonts/DriodArabicNaskh/Regular/DroidNaskh-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/DriodArabicNaskh/Regular/DroidNaskh-Regular.woff2') format('woff2'),
    url('../fonts/DriodArabicNaskh/Regular/DroidNaskh-Regular.woff') format('woff'),
    url('../fonts/DriodArabi.loginColumnscNaskh/Regular/DroidNaskh-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Droid Arabic Naskh';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/DriodArabicNaskh/Bold/DroidNaskh-Bold.eot');
    src: url('../fonts/DriodArabicNaskh/Bold/DroidNaskh-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/DriodArabicNaskh/Bold/DroidNaskh-Bold.woff2') format('woff2'),
    url('../fonts/DriodArabicNaskh/Bold/DroidNaskh-Bold.woff') format('woff'),
    url('../fonts/DriodArabicNaskh/Bold/DroidNaskh-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/DroidArabicKufi/Regular/DroidKufi-Regular.eot');
    src: url('../fonts/DroidArabicKufi/Regular/DroidKufi-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/DroidArabicKufi/Regular/DroidKufi-Regular.woff2') format('woff2'),
    url('../fonts/DroidArabicKufi/Regular/DroidKufi-Regular.woff') format('woff'),
    url('../fonts/DroidArabicKufi/Regular/DroidKufi-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/DroidArabicKufi/Bold/DroidKufi-Bold.eot');
    src: url('../fonts/DroidArabicKufi/Bold/DroidKufi-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/DroidArabicKufi/Bold/DroidKufi-Bold.woff2') format('woff2'),
    url('../fonts/DroidArabicKufi/Bold/DroidKufi-Bold.woff') format('woff'),
    url('../fonts/DroidArabicKufi/Bold/DroidKufi-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Bnasim';
    src: url('../fonts/BBCNasim/BBCNasim.eot');
    src: url('../fonts/BBCNasim/BBCNasim.eot?#iefix') format('embedded-opentype');
    src: local('☺'), url('../fonts/BBCNasim/BBCNasim.woff') format('woff'),
    url('../fonts/BBCNasim/BBCNasim.ttf')  format('truetype'),
    url('../fonts/BBCNasim/BBCNasim.svg#BBCNasim') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bkoodak';
    src: url('../fonts/BKoodak/BKoodak.eot');
    src: url('../fonts/BKoodak/BKoodak.eot?#iefix') format('embedded-opentype');
    src: local('☺'), url('../fonts/BKoodak/BKoodak.woff') format('woff'),
    url('../fonts/BKoodak/BKoodak.ttf')  format('truetype'),
    url('../fonts/BKoodak/BKoodak.svg#BKoodak') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bnazanin';
    src: url('../fonts/BNazanin/BNazanin.eot');
    src: url('../fonts/BNazanin/BNazanin.eot?#iefix') format('embedded-opentype');
    src: local('☺'), url('../fonts/BNazanin/BNazanin.woff') format('woff'),
    url('../fonts/BNazanin/BNazanin.ttf')  format('truetype'),
    url('../fonts/BNazanin/BNazanin.svg#BNazanin') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'yekan';
    src: url('../fonts/WeblogmaYekan.eot?#') format('eot'),  /* IE6–8 */
    url('../fonts/WeblogmaYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/WeblogmaYekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}



@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/iransans/eot/IRANSansWeb_Bold.eot');
    src: url('../fonts/iransans/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/iransans/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/iransans/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/iransans/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/iransans/eot/IRANSansWeb_Medium.eot');
    src: url('../fonts/iransans/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/iransans/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/iransans/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/iransans/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/iransans/eot/IRANSansWeb_Light.eot');
    src: url('../fonts/iransans/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/iransans/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/iransans/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/iransans/ttf/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/iransans/eot/IRANSansWeb_UltraLight.eot');
    src: url('../fonts/iransans/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/iransans/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/iransans/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/iransans/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/iransans/eot/IRANSansWeb.eot');
    src: url('../fonts/iransans/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/iransans/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/iransans/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/iransans/ttf/IRANSansWeb.ttf') format('truetype');
}

@font-face {
    font-family: VazirCode;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/vazir-code/Vazir-Code.eot');
    src: url('../fonts/vazir-code/Vazir-Code.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/vazir-code/Vazir-Code.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/vazir-code/Vazir-Code.ttf') format('truetype');
}

Note: your fonts not served. maybe you have one problems of this list:

• maybe your fonts can not served. check how you set fonts path in your_style.css

• maybe you need to collect static files with this command python manage.py collectstatic

Answer 2

Change the CKEDITOR_CONFIGS to this:

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',
        'contentsCss': STATIC_URL + "fonts.css",
        'font_names': 'IranSans/IranSans;Lalezar/Lalezar'

    },
}

IranSans/IranSans is on this format: FontNameToShow/RealFontName

this is static/fonts.css file:

@font-face {
    font-family: IranSans;
    src: url("iransansweb.ttf");
}

@font-face {
    font-family: Lalezar;
    src: url("Lalezar.ttf");
}

body {
    font-family: IranSans, sans-serif;
}

I set a default font in the body tag. I hope I helped you in solving your problem.