CKEditor 4
Tue, 07/13/2010 - 08:51
#1
prabesh
prabesh's picture
Joined: 13/07/2010
Posts: 8

Ckeditor external fonts problem

Hi
I am using an external fonts for ckeditor. I have added the font face using addCss function for ckeditor content iframe and also added a css file for font listing dropdown iframe. The fonts are listing properly with font preview in font listing dropdown and style is also being added in the content writing iframe. In FF and IE 7 the fonts works fine for me. IT shows and changes in both the iframe but the problem is it does not change in IE 8. In IE8 in the drop down the font name with its preview is shown once but when i try to select the font the font preview is removed from the font that i have added and there is not change in the selected text font. I looked at the source and there was span added with my font like this.
<p>
<span style="font-family: aachen w01 bold">test</span></p>

But there is no change reflected. This happens only in IE 8. Please I have been stuck with this problem for past couple of day. I need some help

Also, Ckeditor when adding a font changes the font family name to lowercase. This causes problem to some case sensitive fonts. How to resolve this problem.

Finally, I have some font name with numerical character in it. The ckeditor does not add quote while adding fonts. This causes problem to the fonts with numerical character. Is there a way to change this, add a quote while assigning the fonts.

i appreciate your help.
Thanks,
Top
Wed, 07/14/2010 - 11:09
comp615
comp615's picture
Joined: 02/07/2010
Posts: 295

Re: Ckeditor external fonts problem

Interesting. I think the lowercase and number things are bugs, which I will look into if I have time. The CSS Specification doesn't say anything about fonts with numbers, so I don't know why that is an issue.

Can you post more details, including the code you are running and the html source code which it generates, as well as the html code that you would write by hand to make it work.

As for the IE8 thing, are you sure you have everything setup right? Is the name of the font family really aachen w01 bold? Usually the bold would be applied through font-weight or bold tags. My guess is IE8 is simply more strict about font naming than the other browsers...
Top
Wed, 07/14/2010 - 11:43
prabesh
prabesh's picture
Joined: 13/07/2010
Posts: 8

Re: Ckeditor external fonts problem


To add fonts i have used the code below
CKEDITOR.config.font_names ="Aachen Bold/Aachen W01 Bold;" + CKEDITOR.config.font_names;


I have used this code to add font face to the ckeditor iframe which adds the font face in the head tag of content area iframe. The fonts are being fetched from fonts hosting site 
CKEDITOR.on( 'instanceCreated', function( e ){
 e.editor.addCss("@font-face{font-family:'Aachen W01 Bold'; src:url('http://fast.fonts.com/d/b2389136-99bf-4399-a37e-6fed79d5f961.eot?d44f19a684109620e4841471a790e81836d2d8012f816aa8619c04e4569bd48106e364198b3ec04195267f4c9ff386a7a7c3168310944e247e916dfa9192d5ed04f10b49a580e17304fb8db9860f1408&projectId=54ffd173-a2ec-47f3-a89c-4aa4cfffb109');"  );
   });


This is the code i have used to replace the textarea with ckeditor 
CKEDITOR.replace( 'txtEdit',
     {
        toolbar :
        [
            
         ['Source','Styles','Format','Font','FontSize'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });






 <span style="font-family: aachen 1 bold;">Aachen Bold</span>


Top
Wed, 07/14/2010 - 11:51
comp615
comp615's picture
Joined: 02/07/2010
Posts: 295

Re: Ckeditor external fonts problem


http://dev.ckeditor.com/ticket/5930





Top
Wed, 07/14/2010 - 11:53
prabesh
prabesh's picture
Joined: 13/07/2010
Posts: 8

Re: Ckeditor external fonts problem

I have tried CKEDITOR.config.font_names ="Aachen Bold/\'Aachen W01 Bold\';" + CKEDITOR.config.font_names; this but this causes more problem. It won't let me select even the font from drop down if i add the quote with esacape in IE*
Top
Wed, 07/14/2010 - 12:26
comp615
comp615's picture
Joined: 02/07/2010
Posts: 295

Re: Ckeditor external fonts problem

Really? Works for me in IE7 and FF. Did you try it with 8 and it didn't?
Top
Wed, 07/14/2010 - 13:41
prabesh
prabesh's picture
Joined: 13/07/2010
Posts: 8

Re: Ckeditor external fonts problem

Yes it worked in IE7 and FF but not in IE8.
Top
Thu, 07/15/2010 - 10:15
prabesh
prabesh's picture
Joined: 13/07/2010
Posts: 8

Re: Ckeditor external fonts problem




http://thewebfonts.com/cksource/demoEnglishIE.html
Top
Thu, 07/15/2010 - 10:45
comp615
comp615's picture
Joined: 02/07/2010
Posts: 295

Re: Ckeditor external fonts problem

I looked at it briefly and still can't figure it out. But maybe this will help:

First, move all your config crap to where you call CKEDitor. I.E.

CKEDITOR.replace( 'txtEdit',
 {
 toolbar :
[ ['Source','Styles','Format','Font','FontSize'],['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']]
contentsCss : 'font1.css'
 font_names : 'Aachen Bold/Aachen W01 Bold;'
});
Or something like that.

where font1.css has the @font-face attribute:
@font-face { font-family: "yourfontname"; src: url( ../fonts/font.eot ); /* IE */ src: local("realfontname"), url("../fonts/font.TTF") format("truetype"); /*non-IE*/ }

The things I changed from how you are implementing it is using contentsCss instead of addCss as that is the wrong function I believe. Also, check your CSS file, because to me it looks like you simply define the font-face twice, which might cause conflicts, instead of the above way which doesn't conflict.

Let me know how all that goes!
Top
Thu, 07/15/2010 - 11:46
prabesh
prabesh's picture
Joined: 13/07/2010
Posts: 8

Re: Ckeditor external fonts problem


var test = CKEDITOR.config.font_names;
CKEDITOR.replace( 'txtEdit',
     {
        toolbar :
        [
            
         ['Source','Styles','Format','Font','FontSize'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ],
      contentsCss : 'font1.css',
      font_names : 'Aachen Bold/Aachen W01 Bold;' + test
    });



http://thewebfonts.com/cksource/demoEnglishIE.html
Top
Thu, 07/15/2010 - 12:18
comp615
comp615's picture
Joined: 02/07/2010
Posts: 295

Re: Ckeditor external fonts problem







http://kenneth.kufluk.com/blog/2010/02/ ... with-ie8/#
Top
Sun, 07/18/2010 - 08:45
prabesh
prabesh's picture
Joined: 13/07/2010
Posts: 8

Re: Ckeditor external fonts problem

Another interesting thing. If you switch from source view to normal view. You can see IE change the font from the desired font back to ariel...

Yes, this is quite a wierd behavior. When you switch from source to normal view then it will reflect the changes of Aachen w01 bold font. But i still cannot figure out what is the problem with this.
Top
Sun, 07/18/2010 - 10:06
prabesh
prabesh's picture
Joined: 13/07/2010
Posts: 8

Re: Ckeditor external fonts problem


http://thewebfonts.com/cksource/demoEnglishIE.html

Top
Fri, 07/13/2012 - 15:44
subhash
subhash's picture
Joined: 05/09/2011
Posts: 7

Re: Ckeditor external fonts problem






viewtopic.php?f=11&t=26152

Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check