Using Design Manager, create a new template of type 'TinyMCE::JavaScript'. Edit the CSS section (approx line 100):
Code: Select all
{* CSS *}
{$googleFontUrl=',//fonts.googleapis.com/css?family=Open+Sans,Roboto'}
{* add the Google Font url in here(above). Note: the leading comma is required. *}
{if isset($cssname) && $cssname != ''}
content_css : '{cms_stylesheet name=$cssname nolinks=1 nocache}{$googleFontUrl}',
{elseif $profile->id_design > 0}
content_css : '{cms_stylesheet designid=$profile->id_design nolinks=1 nocache}{$googleFontUrl}',
{/if}
Then clear the CMSMS cache and your browser cache - and you should now be seeing the web fonts in the TinyMCE WYSIWYG.
More:
Or go one step further, use CustomGS, Create a field called 'Google Fonts', use a plugin/UDT to fetch the CustomGS variable into the TinyMCE JavaScript template above and also (if set) add the link tag into the head of the page for the front end addition of the font.
Love the latest version of TinyMCE: Thanks to Morten Poulsen (silmarillion), Rolf & Mathieu Muths (airelibre), for all your hard work on this. Very appreciated.