There was a requirement from one of our customers to select Google fonts which we were using in front end pages in Tiny mice editors in Joomla 2.5 back end. I couldn't find a plug-in which provides this functionality from the back end. There are few plug-ins which can be used to enable Google fonts or font.com fonts by selectors (like class or ids).
Then I went through the source code of tiny mice editor plug-in found a way add new fonts. It was a bad thing when we think about joomla updates. But with client perspective it was a good solution I think. You are welcome to discuss with regards pros and cons.
Add new fonts here
Edit editor_template.js file in
media\editors\ tinymce\ jscripts\ tiny_mce\ themes\ advanced\ editor_template.js
Search for 'theme_advanced_fonts' or 'Arial' or 'georgia'. There are few places of 'theme_advanced_fonts'. You need to find correct place.
theme_advanced_fonts:"Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats"
I'm going to add Raleway=Raleway,sans-serif; now which is a google font.
theme_advanced_fonts:"Raleway=Raleway,sans-serif;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats"
Now you can select font in Tiny mice editor as follows
Tiny mice editor
Source editor
Did you see 'test text' is doesn't reflect once you select it.
Now you need to import Google font in editor.css file in templates\ system\ css\ editor.css to reflect this once you select this font.
@import url("https://fonts.googleapis.com/css?family=Raleway");
That's all. Enjoy. :-)
Comments