TinyMCE & Google Fonts

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Locked
User avatar
chrisbt
Dev Team Member
Dev Team Member
Posts: 179
Joined: Sun Sep 05, 2010 6:11 am
Location: Sheffield, UK

TinyMCE & Google Fonts

Post by chrisbt »

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):

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 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.
Locked

Return to “Tips and Tricks”