WordPress TinyMCE Default Fonts
The TinyMCE editor used by WordPress for creating and editing posts and pages uses a set of default fonts. These fonts are available “out of the box” when WordPress is installed.
- Andale Mono
- Arial
- Arial Black
- Book Antiqua
- Comic Sans MS
- Courier New
- Georgia
- Helvetica
- Impact
- Tahoma
- Terminal
- Times New Roman
- Trebuchet MS
- Verdana
- Web Dings
These fonts are proven to be cross-browser supported, and will suffice for 99% of common typesetting. However, what if we want to really “jazz” up the content with some additional custom fonts? Well, there is no easy interface… so we must resort to custom code.
There is no need to follow this guide of you are a WP Edit Pro user.
Add a New Font to TinyMCE
Adding a new font(s) to the TinyMCE editor is a multi-step process. Let’s first take a look at the steps:
- Upload the new font to the server (or call font from another server).
- Create a new stylesheet with the font declaration.
- Add newly created stylesheet to TinyMCE Editor.
- Define the font in the “Font Family” dropdown editor button.
- Add newly created stylesheet to front-end and admin sides of website.
Upload Font
The first step is to select a font and make it available for referencing into our site. We see a lot of plugins who use the Google Fonts repository. If Google Fonts are desired, we can skip this step (more later).
Okay, so we have a .otf, .ttr, .woff or .woff2 font (legal for usage) on our computer desktop. This font will need to be uploaded to our server. I typically create a new folder in my wp-content directory.. and name it custom-fonts. Then, simply upload the font to the wp-content/custom-fonts directory.
Leave the font here.. and we will reference it later from our custom stylesheet.
Create New Stylesheet
Next, we need to create a new stylesheet with our new font declaration, and upload it to our server. The stylesheet will contain the rules for each of the fonts we are going to use.
The following links will help explain the stylesheet in more detail:
W3Schools
CSS-Tricks
The two fonts will be “Seaside” and “Journal”.
Here is how the stylesheet should appear:
@font-face { font-family: seaside; src: url('http://mysite.com/wp-content/custom-fonts/seaside.ttf') format('truetype'); } @font-face { font-family: journal; src: url('http://mysite.com/wp-content/custom-fonts/journal.ttf') format('truetype'); }
Lastly, we need to save this stylesheet and upload it to our server. I save mine in the same directory as the custom fonts I upload (step 1 above). This example will save the file as custom-fonts.css and upload it to the wp-content/custom-fonts directory. Final location will resemble wp-content/custom-fonts/custom-fonts.css.
Add Stylesheet to TinyMCE Editor
Now, we need to load the stylesheet we created into the TinyMCE editor. To do this, we will need to use our Child Theme.
Here is the code to intercept the TinyMCE initialization process; and allow us to add our stylesheet:
function load_custom_fonts($init) { $stylesheet_url = 'http://mysite.com/wp-content/custom-fonts/custom-fonts.css'; // Note #1 if(empty($init['content_css'])) { // Note #2 $init['content_css'] = $stylesheet_url; } else { $init['content_css'] = $init['content_css'].','.$stylesheet_url; } return $init; // Note #3 } add_filter('tiny_mce_before_init', 'load_custom_fonts'); // Note #4
1) This is the location to the CSS stylesheet we created above. Remember http://mysite.com should be changed to your actual website domain.
2) This is where we “filter” our stylesheet into the editor initialization process. We first check if any stylesheets are coming in via the $init variable; if there are not, we simply add our stylesheet. If there are, we add to the existing stylesheets.
3) We have to return the $init variable, or it will break the editor.
4) This is the filter name used by WordPress to hook into the TinyMCE editor.
We are going to build upon this code in the next step.
Define Font Family Editor Button
The next step is adding the name of the font to the existing “Font Family” editor dropdown button.
Expanding on the code above; we have a little more to add:
$font_formats = isset($init['font_formats']) ? $init['font_formats'] : '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'; // Note #1 $custom_fonts = ';'.'SeaSide=seaside;Journal=journal'; // Note #2 $init['font_formats'] = $font_formats . $custom_fonts; // Note #3
1) First we check if any existing fonts are in the initialization process; if they are, we use them; otherwise, we have to re-create the original set of fonts used by default in the editor.
2) Next, we write our new custom fonts. The format is (Font Name)=(“font-family” name as defined in our stylesheet). Multiple fonts are separated by a semi-colon (;).
3) Lastly, we take the original fonts, and add our original fonts.
The final code in our custom function will look like this:
function load_custom_fonts($init) { $stylesheet_url = 'http://mysite.com/wp-content/custom-fonts/custom-fonts.css'; if(empty($init['content_css'])) { $init['content_css'] = $stylesheet_url; } else { $init['content_css'] = $init['content_css'].','.$stylesheet_url; } $font_formats = isset($init['font_formats']) ? $init['font_formats'] : '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'; $custom_fonts = ';'.'SeaSide=seaside;Journal=journal'; $init['font_formats'] = $font_formats . $custom_fonts; return $init; } add_filter('tiny_mce_before_init', 'load_custom_fonts');
Now, if we open the editor and add the “Font Family” button… we should see our newly defined fonts in the dropdown list.
But wait… the fonts do not appear in their respective font format. The font will also not render properly on the front-end of the website. This is because we also have to add our stylesheet with the custom font declarations to our admin area and the front-end of the website.
Add Stylesheet to Admin and Front-end Header
The last step is to add our stylesheet (created in step 2, above) and make it available to the admin area (for the font dropdown button) and for the front-end of the website (so posts/pages have the font available).
We can achieve this with another custom function added to our child theme:
function load_custom_fonts_frontend() { echo '<link type="text/css" rel="stylesheet" href="http://mysite.com/wp-content/custom-fonts/custom-fonts.css">'; } add_action('wp_head', 'load_custom_fonts_frontend'); add_action('admin_head', 'load_custom_fonts_frontend');
Remember to change http://mysite.com to the actual domain where the stylesheet file is located.
This will add our custom stylesheet to both the admin header area, and the front-end header area. Now, our custom fonts will appear correctly in the editor “Font Family” dropdown button; and also on the front-end of the website (in posts and pages).
Final Results
We have uploaded our custom fonts; created a custom stylesheet with our new font declarations; added the stylesheet to a) the content editor initialization process (so fonts render properly in the content editor) b) the admin header area (so fonts render properly in the dropdown menu) and c) the front-end of the website (so fonts render properly in posts/pages).
We can now simply highlight some text, apply our new font, and sit back and view our success.
Note: It may be desirable to adjust the “Font Size” of the new font. This button can be added via the WP Edit Pro “Buttons” tab.
Closing
This wraps up how to add fonts to the WordPress TinyMCE editor as of WordPress version 4.1 and TinyMCE version 4.
Please leave any questions, comments and/or feedback below.
It work like a charm, Thank you for your hard work and keep it up.
Hi I can’t get it to show on the editor bar anywhere, I have success using a function to add styles but not this, can you say why one would work but not this one?
Thanks
Hello, I apologize for the inconvenience. I am going to need more detail in order to try and replicate the issue. Can you please create a Support Ticket?
Thank you.
Hi Josh…just came across this write-up…very detailed, but one thing I’m not clear-on (nubie)…what file do you add the function to? Is is the functions.php in the theme folder? That’s the best I could figured, but no joy. Running current version of WP Edit and Word Press.
Ok, some joy…fonts show up in the drop down but not as their style. I can apply them to text and they preview properly, but don’t show up in the editor. I’ve went over the admin\head part a few times…seems simple enough 😉 deactivated and reactivated the plugin also to no effect.
Sorry… I just noticed the follow up. To get the fonts to be styled properly.. you’ll need to create the stylesheet. Wait, are you using the WP Edit Pro plugin?
It’s actually the functions.php file in your child theme folder. When making these types of adjustments; it’s best practice to create a child theme for the theme you are using. Once the child theme is active; you can begin using the child themes functions.php file to begin adding custom functions.
Shouldn’t you be using wp_enqueue_scripts to load your fonts on the front end rather than wp_head and admin_enqueue_scripts for the backend rather than admin_head.
Hi Brad,
Yes, that is certainly considered best practice. However, in an attempt to keep this tutorial simple for non-techies; I opted to not explain how to enqueue other files from other locations.
Certainly any WP coder can opt for using the enqueue method.