Text not using the font when editing in TinyMce

Text not using the font when editing in TinyMce

by Russell England -
Number of replies: 13
Picture of Plugin developers

I'm trying to add an Arabic font to the TinyMce editor in Moodle 2.5 - I don't speak Arabic so I'm testing with a font called akaDora downloaded from http://www.fonts2u.com/akadora.

I downloaded the @face-font file and extracted the files to /theme/mytheme/fonts/

/theme/mytheme/fonts/akaDora.eot
/theme/mytheme/fonts/akaDora.woff
/theme/mytheme/fonts/akaDora.ttf
/theme/mytheme/fonts/akaDora.svg

Then added the following to /theme/mytheme/style/custom.css 

@font-face {
    font-family:'aka_Dora';
    src:url('/theme/mytheme/fonts/akaDora.eot') format('eot'),
        url('/theme/mytheme/fonts/akaDora.woff') format('woff'),
        url('/theme/mytheme/fonts/akaDora.ttf') format('truetype'),
        url('/theme/mytheme/fonts/akaDora.svg#akaDora') format('svg');
    font-weight:normal;
    font-style:normal;
}

I tried url([[font:theme|akaDora.eot]]) etc but this didn't pick up the files.

I then added aka_Dora=aka_Dora to the list of available fonts in /admin/settings.php?section=editorsettingstinymce

When I use the editor I can see the font in the drop down list - it also displays the text in the font.

displaying font drop down list in Tinymce

But if I select the font and start typing, it displays in plain text.

It displays correctly when the text is saved but this won't be useful when typing Arabic.

I also tried copying the font files into /lib/editor/tinymce/tiny_mce/3.5.8/themes/advanced/fonts/

and adding this to /theme/mytheme/editor.css

@font-face {
    font-family:'akaDora';
    src:url('/lib/editor/tinymce/tiny_mce/3.5.8/themes/advanced/fonts/akaDora.eot') format('eot'),
        url('/lib/editor/tinymce/tiny_mce/3.5.8/themes/advanced/fonts/akaDora.woff') format('woff'),
        url('/lib/editor/tinymce/tiny_mce/3.5.8/themes/advanced/fonts/akaDora.ttf') format('truetype'),
        url('/lib/editor/tinymce/tiny_mce/3.5.8/themes/advanced/fonts/akaDora.svg#akaDora') format('svg');
    font-weight:normal;
    font-style:normal;
}

but still doesn't display.

Any ideas?

Average of ratings: -
In reply to Russell England

Re: Text not using the font when editing in TinyMce

by Mauno Korpelainen -

I then added aka_Dora=aka_Dora to the list of available fonts in /admin/settings.php?section=editorsettingstinymce

Shouldn't the font-family be given with

aka_Dora=akaDora ;

if your font is using  font-family:'akaDora';

 

 

Average of ratings: -
In reply to Mauno Korpelainen

Re: Text not using the font when editing in TinyMce

by Russell England -
Picture of Plugin developers

Ah that's my typo in the post rather than in the code

Average of ratings: -
In reply to Russell England

Re: Text not using the font when editing in TinyMce

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

In editor.css at least, it looks as if you have specificied the font, but not told it where to apply it

e.g.

body {font-family: akaDora;}
Average of ratings: -
In reply to Richard Oelmann

Re: Text not using the font when editing in TinyMce

by Russell England -
Picture of Plugin developers

I need it inside the editor when I'm typing.

It works if I choose the other fonts but not if I choose aka dora.

eg:

Showing different fonts in the tinymce editor

Average of ratings: -
In reply to Russell England

Re: Text not using the font when editing in TinyMce

by Gorn --- -

I have the same problem, or rather this problem on top of another one with fonts.

I had a special font embedded in a theme and also some fonts that I could access in the way Russell wants to access his akaDora. It worked under Moodle 2.4.9

Now I've upgraded to Moodle 2.7.1 and at first neither my theme font nor the fonts in Tinymce showed up. After some tweaking I have the theme font back, but it looks rather strange, different from the font in 2.4.9

I've tried numerous things, including generating a new webfontkit, but nothing seems to work.

I've moved my fonts out of pix/fonts to theme/fonts and added a custom.css to my theme with the @font-face tags like this:

   @font-face {
     font-family: 'VA';
     src: url([[font:theme|vau.eot]]);
     src: url([[font:theme|vau.eot]]) format('embedded-opentype'),
     url([[font:theme|vau.woff]]) format('woff'),
          url([[font:theme|vau.ttf]]) format('truetype');
         
     font-weight: normal;
     font-style: normal;
   }

As I said the theme font now works again, but looks different. The fonts inside Tinymce don't work, I just see them correctly displayed in the dropdown list, just like Russell. When I try the Firebug debugger I get the error message that the fonts are not found, but they're in the fonts folder.

I have no idea what to try next and would be grateful for some help.

Average of ratings: Useful (1)
In reply to Gorn ---

Re: Text not using the font when editing in TinyMce

by Mauno Korpelainen -

I could test both cases during next weekend. Originally TinyMCE has used skin css to control the content and buttons/tabs of editor itself so if nothing else works you should be able to add font css to files like lib/editor/tinymce/tiny_mce/version_of_tinymce/themes/advanced/skins/moodle/content.css

There may be some bug in the moodle code reading fonts from editor.css that must be enabled in theme config.php as editor style sheet with something like

$THEME->editor_sheets = array('editor');

or the paths of fonts simply change when moodle reads css from cached files. If adding font tags with "normal paths", not moodle way, to skin css does not work you could also try full http(s) paths with site name in previous examples.

Average of ratings: -
In reply to Mauno Korpelainen

Re: Text not using the font when editing in TinyMce

by Gorn --- -

Hi Mauno,

thanks for your reply!

I have already enabled the editor sheet in config.php, so that can't be the reason for the problem.

And I wouldn't be too happy, if I had to change the tinymce code in order to get the fonts working. Especially since it worked in Moodle 2.4 with using just the theme.

Maybe it is a path problem, I'll definitely have a look at this option.

Strangely enough, Moodle has now found one of the fonts I've added, but it still is only shown in the editor's dropdown list. All the other fonts are again listed as "not found", with the additional error message:

downloadable font: download failed (font-family: "VA" style:normal weight:normal stretch:normal src index:0): status=2147746065
source: http://localhost/mymoodle/theme/font.php?theme=mytheme&component=core&font=VA

What confuses me now even more is the fact that Moodle now finds that one font (it's simply listed as "ok"), which it hasn't before. I haven't changed anything, it's the same code.

Average of ratings: -
In reply to Gorn ---

Re: Text not using the font when editing in TinyMce

by Mauno Korpelainen -

You don't actually need to change any core code of moodle and not even core code of tinymce to use different skins in editor - see for example https://moodle.org/mod/forum/discuss.php?d=234057&parent=1016900

Anyway I am going to test this font issue next weekend with moodle style double bracket code and report back if I find the reason for font rendering failure.

Average of ratings: -
In reply to Mauno Korpelainen

Re: Text not using the font when editing in TinyMce

by Russell England -
Picture of Plugin developers

Hi Mauno

Thank you for the replies - was you able to get this working?

Average of ratings: -
In reply to Mauno Korpelainen

Re: Text not using the font when editing in TinyMce

by Russell England -
Picture of Plugin developers

I tried adding

@font-face {
    font-family:'akaDora';
    src:url('/theme/mytheme/fonts/akaDora.eot') format('eot'),
        url('/theme/mytheme/fonts/akaDora.woff') format('woff'),
        url('/theme/mytheme/fonts/akaDora.ttf') format('truetype'),
        url('/theme/mytheme/fonts/akaDora.svg#akaDora') format('svg');
    font-weight:normal;
    font-style:normal;
}

to /lib/editor/tinymce/tiny_mce/3.5.8/themes/advanced/skins/default/content.css 

and ui.css and dialog.css, purged the caches and refreshed but still no luck sad

Average of ratings: -
In reply to Russell England

Re: Text not using the font when editing in TinyMce

by Mauno Korpelainen -

Sorry I was too busy with other things but some notes:

Moodle 2.5 is not using default skin - it is using skin o2k7 (defined in lib/editor/tinymce/lib.php) - it was changed later (in moodle 2.6 or 2.7) to skin moodle (with these gray buttons). Paths inside /lib/editor/tinymce/tiny_mce/3.5.8/themes/advanced/skins/o2k7/content.css should work.

if I remember it correct the slash in url means that files should be in web root (http://yoursite.xxx/theme/mytheme/fonts/) and if you remove that first slash files should be inside theme folder that is a sub folder of the folder where css file itself is: /lib/editor/tinymce/tiny_mce/3.5.8/themes/advanced/skins/o2k7/theme/mytheme/fonts/

You can use also paths like ../../../../../../../../../theme/mytheme/fonts/ in skin content.css (just count how many folders you need to move "up" to get to correct level.

I try to test that double square bracket code as soon as possible - we just have an exam week starting after a couple days and days are too short. wink

Average of ratings: -
In reply to Russell England

Re: Text not using the font when editing in TinyMce

by Mauno Korpelainen -

I am not sure why moodle fails to render fonts with that double bracket code from editor.css but I found a nice workaround. If you can edit file lib/editor/tinymce/lib.php and find

            'content_css' => ...

you can change that line to for example

            'content_css' => "css/content.css, http://fonts.googleapis.com/css?family=Diplomata|Sofadi+One",

The advantage of this is that you can use several sources for fonts, TinyMCE reads always first skin content.css, then those css files given in content_css and this way you can use also web fonts elsewhere. In fontselectlist I have after Wingdings

...Wingdings=wingdings;Diplomata=Diplomata;Sofadi One=Sofadi One;AkaDora=akaDora

and in this case folder css needs to be in moodle root - content.css can use normal css, it's not a moodle style file and not cached but you only need those font tags inside it. And finally folder css could have actual font files and content.css could have css like

@font-face {
    font-family:'akaDora';
    src:url('akaDora.eot') format('eot'),
        url('akaDora.woff') format('woff'),
        url('akaDora.ttf') format('truetype'),
        url('akaDora.svg#akaDora') format('svg');
    font-weight:normal;
    font-style:normal;
}

If you can't edit any files of moodle you should be able to add to Site administration > Plugins > Text editors > TinyMCE HTML editor > General settings > Custom configuration (under fonstylelist box)

tags like

{"content_css" : "css/content.css, http://fonts.googleapis.com/css?family=Diplomata|Sofadi+One"}

that should do the same job ( I haven't tested this yet)

Purge caches.

Here's the result:

akadora

Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: Text not using the font when editing in TinyMce

by Russell England -
Picture of Plugin developers

Fantastic!!! Thank you so much for your help!!!

I had already tried putting the fonts into editor.css but it looks like $contentcss is using the editor.css in the base theme for the editor rather than the current theme.

I did this in /lib/editor/tinymce/lib.php  in function get_init_params()

        $contentcss .= ', /theme/mytheme/style/fonts.css';
        $fontselectlist .= ';Aka Dora=akaDora';

And in /theme/mytheme/style/fonts.css

@font-face {
    font-family:'akaDora';
    src:url('/theme/mytheme/fonts/akaDora.eot') format('eot'),
        url('/theme/mytheme/fonts/akaDora.woff') format('woff'),
        url('/theme/mytheme/fonts/akaDora.ttf') format('truetype'),
        url('/theme/mytheme/fonts/akaDora.svg#akaDora') format('svg');
    font-weight:normal;
    font-style:normal;
}

Purged the caches and it works! :D

I still need the @font-face in /theme/mytheme/style/custom.css too so the content is displayed correctly but I'm just thankful to get it working ;)

Average of ratings: -