TinyMCE & Google Fonts
Posted: Mon Mar 07, 2016 3:32 pm
The latest version of TinyMCE (v3+) makes it easy(ish) to load Google Fonts (other web fonts are available 
, into TinyMCE so that editors can see exactly what the text will look like on the page.
Using Design Manager, create a new template of type 'TinyMCE::JavaScript'. Edit the CSS section (approx line 100):
Then for the required TinyMCE profile, on the Templates tab, select the 'JavaScript template' that you have just created.
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.
, into TinyMCE so that editors can see exactly what the text will look like on the page.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.