How to add web font to tinyMCE?

Question

I'm on Joomla 3.4.

I have checked JCE editor and there's a way to simply add in the configuration an option so that each time I click on the option from "font family" it will add, in line, the custom/web family font to the element.

The fonts are loaded within the template.css, they work, and JCE simply adds the right font family to chosen element.

I don't really feel like I need JCE, especially that I was fine so far with tinyMCE. But I can't in any way seem to figure, how to add the same thing I added to JCE but to tinyMCE.

I googled and looked for some forum posts, they talked about some files... but for ooooold joomla, so those files aren't in the current joomla anymore so I can't edit them.

Any idea how to add custom web font in the font family selection in tinyMCE? Again, I have the font family loaded in the stylesheet already, I just need to be able to apply them in tinyMCE to the elements like I could the "default" fonts from font family editor selection.

Thanks in advance.

Answer 1

The solution is a bit tricky but it should work.

Open this file [root]/media/editors/tinymce/tinymce.min.js (yes, it's minified), try to find this part

function(){var n="Andale Mono=andale mono,times;

change it to

function(){var n="Your New font=your new font,sans-serif;Andale Mono=andale mono,times;

then open file [root]/templates/your_active_template/css/editor.css

add your @font-face decalaration in the top of file

@font-face {
font-family: 'Your New font';
src: url('fonts/samman/your-new-font.eot');
src: url('fonts/samman/your-new-font.eot?#iefix') format('embedded-opentype'),
     url('fonts/samman/your-new-font.woff') format('woff'),
     url('fonts/samman/your-new-font.ttf') format('truetype'),
     url('fonts/samman/your-new-font.svg#your-new-font') format('svg');
font-weight: normal;
font-style: normal;

}