Adding and Controlling TinyMCE Fonts in Drupal

Customizing the TinyMCE editor's font selection is straight forward thanks to a hook provided by the Drupal Wysiwyg module. The hook_wysiwyg_editor_settings_alter() function allows a module to update the settings passed to the editor. The programming is simple. Discovering and understanding the values of the settings can be a challenge.

Font selection is enabled in the Wysiwyg profile. Edit the profile (Administration > Content authoring > Wysiwyg profiles > Edit) and enable the Font Family dropdown selector by checking the Fonts checkbox in the Button and plugins section. This is as far as the user interface takes us.

In the TinyMCE initialization code the font selector drop down is configured by a JavaScript string variable named theme_advanced_fonts. The string is a list of font selections with fall backs, separated by semi-collons:

Display name 1=font1,font_fallback1,font_fallback2;Display name 2=font2,fallback_font3, fallback_font4

A real example:

Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde

If the specified fonts are natively available in the web browser no further work is required. If the font is defined using @font-face the definition needs to be in a style sheet loaded by TinyMCE or it will not be displayed during the editing session. The list of stylesheets loaded by the editor is defined in the JavaScript variable named content_css.

Both the theme_advanced_fonts and content_css variables are available in hook_wysiwyg_editor_settings_alter() in a PHP array. In my testing I found the theme_advanced_fonts variable was not pre-populated with the TinyMCE default fonts, even though content_css and other values were. To work around this I pulled the values for theme_advanced_fonts out of the JavaScript configuration file and redefined them in my code.

For the following example the client has declared, "Friends don't let friend's use comic sans, remove it from the list! And please add this font I found on Font Squirrel named Architects Daughter".

In a module for site customizations the hook_wysiwyg_editor_settings_alter() function is defined. This hook fires for all editors so logic is added to specify TinyMCE. The editor fonts are defined in an array to make the list easy to update. In the sample code a line for the Architects Daughter font is added and the line for Comic Sans is commented out. The font list is then assigned to the theme_advanced_fonts variable in the $settings array. The CSS file containing the @font-face definition for Architects Daughter is appended to the content_css variable. This only defineds the font in the editor. The font will also need to be defined for the entire site in the theme CSS.

<?php /** * Implements hook_wysiwyg_editor_settings_alter(). */ function site_customizations_wysiwyg_editor_settings_alter(&$settings, $context) {   if ($context['profile']->editor == 'tinymce') {     $font_styles = array(       "Andale Mono=andale mono,times",       "Architects Daughter=architects_daughterregular",       "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",     );     $settings['theme_advanced_fonts'] = implode(';', $font_styles);     $settings['content_css'] .= ',' . drupal_get_path('module', 'site_customizations') . '/additional_fonts.css';   } } ?>

And the result:

The Wysiwyg profile has a number of CSS options. This code was tested using with Editor CSS set to Use theme CSS. It may be possible to override the content_css value with different settings.

For demonstration purposed I've created an example module named WYSIWYG Fonts and made it available on Github at https://github.com/dale42/wysiwyg_fonts. It is completely self-contained. I recommend copying the code to a site customization or helper module rather than using it as-is.

Tagged:

Original Article:

Adding and Controlling TinyMCE Fonts in Drupal