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,
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,
Re: Ckeditor external fonts problem
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...
Re: Ckeditor external fonts problem
HI comp615,
To add fonts i have used the code below
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
This is the code i have used to replace the textarea with ckeditor
The above code works perfectly as i want in FF and IE7 but the problem is in IE 8., I have also use meta tags to emulate IE7 but was unsuccessfull.
About the font with numbers, since ckeditor puts the font family without quote as shown below so if there is font with spaces and numbers in between it causes error.
I hope the above details helps you to understand my problem. Please help me with this.
Re: Ckeditor external fonts problem
I've traced the problem to the CSS Normalizer. Looks like it needs a bit of work, I've posted on an open ticket here:
http://dev.ckeditor.com/ticket/5930
You can try to make changes yourself on line 1208 of the styles plugin; where this function is located. All you have to do is remove the toLowerCase function.
Lastly, can you try wrapping your font listings using escapes like so? I know it won't fix the case issue, but I just want to see if that helps with the number thing any...
CKEDITOR.config.font_names ="Aachen Bold/\'Aachen W01 Bold\';" + CKEDITOR.config.font_names;
Re: Ckeditor external fonts problem
Re: Ckeditor external fonts problem
Re: Ckeditor external fonts problem
Re: Ckeditor external fonts problem
I have added a testing url of my code for IE. This changes cannot be seen in firefox becuase i have used eot and not ttf for fonts. You can check this in IE7 where it is working perfectly fine but not in IE8. I hope this will help you to understand the problem more deeper. You can view the source of what i have done. Please reply me asap because i am really stuck with this and need a effective solutions for this.
Here is the url:
http://thewebfonts.com/cksource/demoEnglishIE.html
Re: Ckeditor external fonts problem
First, move all your config crap to where you call CKEDitor. I.E.
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!
Re: Ckeditor external fonts problem
I did all the setting as you told me but the problem still persists . I removed the instanceReady and instancecreated script of ckeditor and added the fonts like this
I have uploaded the latest changes. Please have a look at it.
http://thewebfonts.com/cksource/demoEnglishIE.html
Re: Ckeditor external fonts problem
Gosh, I'm stumped on this one. Some progress was made though. Now it shows the selection in the correct font at least, but once selected, it goes back to the wrong one...which I don't understand...
At this point I'm tempted to say it's an IE error...you might point to ckeditor_source.js instead of the main js, it makes debugging the code a lot easier in firebug.
EDIT: 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...
EDIT2: See this page for something that might very well be related: http://kenneth.kufluk.com/blog/2010/02/ ... with-ie8/#
Re: Ckeditor external fonts problem
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.
Re: Ckeditor external fonts problem
I found an solutions for this. The link you send me was a good help. Actually found out that whenever iframe are used with the font face then on the iframe opening or closing the effect of this font face is removed. In the ckeditor when we open the font list iframe and select a font then on closing the font listing iframe it removes the effect of font face. The solution i found was to reload the css files that i have included in iframe. So on each iframe event i reloaded the css files. The problem here is whenever i reload the stylesheet it downloads the external fonts. This won't cause a problem if there are few fonts but if there are lot of fonts then it will freezer the IE browser. I have uploaded the latest changes in the link below
http://thewebfonts.com/cksource/demoEnglishIE.html
Please have a look at my latest solutions and let me know if there is better solution than this.
Re: Ckeditor external fonts problem
Hi Comp615/Prabesh,
I have a similar problem. I am not able to add a new font like "Kruti Dev 010" to my ckeditor.
But I am able to add this as "Kruti Dev". So is there any problem with integer name in font family.
I have also created a post on forum :
viewtopic.php?f=11&t=26152
Thanks in advance.