I am try to use custom font in ckeditor, its working fine for textarea but for inline its not working. I am testing in IE8.
In content.css i have applied @font-face for all the font i will be using eot format.
In config.js i have added below code :
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.font_names = 'CelesteBold/celestebold;'+'Frutiger Lt 45 Light/frutiger-lt-45-light;'+'Frutiger-Bold/frutiger-bold;'+config.font_names;
config.width = '100%';
config.height = 80;
};
Below is the html code i have used :
In head tag i have included
1. ckEditor.js
2. config.js
3. content.css
Below is the content in the body :
<div contenteditable="true" id="editor1">
<p><span style="font-size: 35px"><span style="font-family: CelesteBold">Load Inline 01 ckEditor Here</span></span></p>
</div>
<div contenteditable="true" id="editor2" onclick="initializeCkEditorOnClick()">
<p><span style="font-size: 35px"><span style="font-family: Frutiger-Bold">Load Inline 02 ckEditor Here</span></span></p>
</div>
<div contenteditable="true" id="editor3">
<p><span style="font-size: 35px"><span style="font-family: Frutiger-LT-45-Light">Load Inline 03 ckEditor Here</span></span></p>
</div>
<script type="text/javascript">
// Turn off automatic editor creation first.
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('editor1');
function initializeCkEditorOnClick(){
CKEDITOR.inline('editor2');
$('head').append('<link rel="stylesheet" href="ckeditor-full-4.3/contents.css" />');
}
</script>
If you check my code for all the three div, i am applying ckeditor (contenteditable="true") but for first div by default ckEditor is applied, for second div on click i am adding ckEditor and for third div its disable.
Issue :
For first div font family is not applied (though i have added font-family:CelesteBold),
For second div font family is applied but onclick on the div applied font is not visible. (default font is shown instead of Frutiger-Bold),
Let me know if any more information is required.