Append Font Family in TinyMCE

You should use the styleselect key in the array of the TinyMCE settings for custom formats. This select is really useful for custom styles, enhancements. you find all relevant information for this solution in this answer to question #128931 in the same context.

Via fontselect

But if you like to use the font select, then use the follow source as example. The result is, that the editor add a span-tag with the font settings in inline styles, like <span style="font-family: arial, helvetica, sans-serif;">Content</span>.

The follow example source create this result, visible in the screenshot.
enter image description here

Add Font Select

At first add the the key string to get the button to font select.

/**
 * Add the "font family" button.
 */
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );

function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'fontselect' );
    return $buttons;
}

Change Font List

Now you should see the default list of all fonts. The documentation have also include the list of the default value, font list. To change this list use the follow example.

/**
 * Add fonts to the "Font Family" drop-down.
 */ 
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    $font_formats="Andale Mono=andale mono,times;"
                  . 'Arial=arial,helvetica,sans-serif';
    $settings[ 'font_formats' ] = $font_formats;

    return $settings;

}

Default Fonts

'Andale Mono=andale mono,times;'+ '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'

TinyMCE 3 vs 4

Small hint, this works only since TinyMCE 4*, smaller this version you must use the key theme_advanced_fonts instead of font_formats.

Use Google Fonts

This answer shoulds help.

Related Posts:

  1. How do I include a TinyMCE editor in the frontend?
  2. Remove HTML editor and visual/HTML tabs from TinyMCE
  3. Stop editor from removing tags and replacing them with nbsp
  4. Possible to stop WordPress from adding p1, p2… classes to p tags in TinyMCE?
  5. Custom Tiny MCE button to bring up a custom php popup
  6. Add unique class or ID information to tinyMCE
  7. How can I stop TinyMCE from converting my HTML entities to characters?
  8. TinyMCE Anchor Button not showing
  9. How to keep   non-breaking spaces in the visual editor?
  10. Is there a way to prevent the Editor from modifying my HTML
  11. Remove “Are You Sure” dialogue when leaving editor
  12. Creating a custom MCE view for your shortcodes [closed]
  13. Apply custom style to single word in WordPress
  14. How to customize the symbols that appear in the Visual Editor insert custom character
  15. How to keep a textarea and stop tinymce?
  16. TinyMCE Editor Set Default Tab
  17. TinyMCE – Show Advanced Options (2nd Row) By Default
  18. Disable TinyMCE autoformatting
  19. Visual Editor freezing on text highlight since 4.3
  20. Remove ‘Visual’ tab from TinyMCE editor
  21. tinyMCE.activeEditor = null WP editor loaded in ‘Text’ mode?
  22. Customising the WordPress TinyMce editor and it’s buttons
  23. Keep pasted pre formatted code as it is -with tabs- in visual editor
  24. How do i disable/disallow and tags in TinyMCE?
  25. Text cut off after the character 𪇆 in TinyMCE
  26. Insert text a cursor position in to TinyMCE text editor
  27. Using main style.css with add_editor_style
  28. Change Default Font Size and Remove Unwanted Font Sizes in TinyMCE
  29. How can I control the HTML output of my post?
  30. TinyMCE Plugin Parameter
  31. Access tinymce from thickbox
  32. How can I troubleshoot why TinyMCE won’t load custom plugins in the visual editor?
  33. TinyMCE Editor as component in Gutenberg Block
  34. wpeditor issue – shows both mode and not able to focus/edit during visual mode
  35. wp_editor on input changes content
  36. Set tinymce direction to rtl
  37. Add a select a class dropdown in tinymce
  38. WordPress & TinyMCE: Failed to load
  39. How do I add a TinyMCE row that all users can see, instead of just admins?
  40. How to disable formatting
  41. Our shortcode dropdown box in Tinymce is not working in WordPress 3.9?
  42. How to get line breaks to translate to paragraphs?
  43. How to add button in TinyMCE TEENY mode?
  44. TinyMCE Editor change underline button behavior – u tag instead of span text-decoration underline
  45. Can’t remove   generated by editor from database
  46. Localize variables with TinyMCE script
  47. Shift-Enter in tinyMCE (wp 3.3.1) not working
  48. TInyMCE object Tag stripped
  49. WordPress Tinymce editor broken and nothing seems to fix it :(
  50. Visual editor not showing all table rows
  51. Post content not showing in the edit post textarea
  52. Disable TinyMCE Table formatting width/height
  53. Use schema.org HTML in TinyMCE Editor
  54. Adding custom styles to elements, without creating new elements
  55. customize tiny MCE blockqute
  56. allowing all HTML tags in tinymce editor
  57. Adding custom block formats to TinyMCE. Everything works until JavaScript error when applying the format
  58. tiny_mce_before_init is not trigger
  59. Save WYSIWYG editor plugin settings, only works after second save
  60. Adding CSS to admin TinyMCE editor for custom button
  61. Front-end image upload from TinyME [closed]
  62. Embed iFrame in WordPress 3.0.1
  63. How can a TinyMCE modal return formatted/visual text?
  64. How to apply a custom skin to WP_Editor / TinyMCE?
  65. Why exactly does WordPress use p tags, not divs?
  66. How to edit blockquote image
  67. Customizing tinyMCE 4 Styles and Format dropdowns
  68. TinyMCE: Move buttons from 2nd row to top row
  69. Change the background of the TinyMCE editor with available WP arguments
  70. When I write posts I usually have to use non breaking space element in order to keep margins in between the sentences. why?
  71. TinyMCE doesn’t work correctly in the Media Modal Window
  72. Add custom value for link_class_list for the classic editor
  73. How to apply padding to TinyMCE editor?
  74. Wordpres Tinymce custom button (Gavick guide)
  75. Loading a self-hosted custom @font-face into TinyMCE dropdowns (Classic Editor) via ‘tiny_mce_before_init’ filter
  76. TinyMCE is inactive after installation
  77. WordPress, tinymce, how get the link text from dialog?
  78. tinymce and responsive line-breaks (short words after a period)
  79. How to set custom TinyMCE format style as default?
  80. Did Gutenberg block editor change the html in post content during import?
  81. Client on iPad accidentally adding tag to posts while writing
  82. Add custom TinyMCE 4 Button: Is it mandatory to have one JS per button?
  83. Nested ordered list in tinymce
  84. Prevent Black Studio TinyMCE from adding tags when switching from Visual to HTML mode
  85. Visual Editor not working properly
  86. wp_editor Too Tall when Content is Loaded
  87. TinyMCE HTML Encode Backslash
  88. Inline Editing with wp_editor and tinymce (problem with textarea)
  89. Revealing ‘code’ hidden button in TinyMCE4 and WordPress 3.9.x
  90. TinyMCE 4.0: specifying buttons to display [duplicate]
  91. regEx wp core file
  92. Adding New Row of Custom TinyMCE
  93. Using TinyMCE fiddle for node filter to add id attribute to anchors
  94. WYSIWYG with HTML source?
  95. How do I separate my theme’s styles from editor styles?
  96. Adding to he format dropdown menu tinyMCE in WordPress
  97. WordPress and TinyMCE Advanced: Failed to load javascript
  98. Is there an alternative way to upload html without using TinyMCE?
  99. add button to tinymce
  100. install tinymce plugin [closed]

Leave a Comment