Make fonts.com font work in TinyMCE (iframe referrer issue)

3 comments

1. I ran into this issue with Typekit, here’s my solution:

   http://www.tomjn.com/150/typekit-wp-editor-styles/

   add_filter("mce_external_plugins", "tomjn_mce_external_plugins");
   function tomjn_mce_external_plugins($plugin_array){
       $plugin_array['typekit']  =  get_template_directory_uri().'/typekit.tinymce.js';
       return $plugin_array;
   }
   

   and this js:

   (function() {
       tinymce.create('tinymce.plugins.typekit', {
           init: function(ed, url) {
               ed.onPreInit.add(function(ed) {
   
                   // Get the DOM document object for the IFRAME
                   var doc = ed.getDoc();
   
                   // Create the script we will add to the header asynchronously
                   var jscript = "(function() {n
                       var config = {n
                           kitId: 'xxxxxxx'n
                       };n
                       var d = false;n
                       var tk = document.createElement('script');n
                       tk.src = '//use.typekit.net/' + config.kitId + '.js';n
                       tk.type = 'text/javascript';n
                       tk.async = 'true';n
                       tk.onload = tk.onreadystatechange = function() {n
                           var rs = this.readyState;n
                           if (d || rs && rs != 'complete' && rs != 'loaded') return;n
                           d = true;n
                           try { Typekit.load(config); } catch (e) {}n
                       };n
                       var s = document.getElementsByTagName('script')[0];n
                       s.parentNode.insertBefore(tk, s);n
                   })();";
   
                   // Create a script element and insert the TypeKit code into it
                   var script = doc.createElement("script");
                   script.type = "text/javascript";
                   script.appendChild(doc.createTextNode(jscript));
   
                   // Add the script to the header
                   doc.getElementsByTagName('head')[0].appendChild(script);
   
               });
   
           },
           getInfo: function() {
               return {
                   longname: 'TypeKit For TinyMCE',
                   author: 'Tom J Nowell',
                   authorurl: 'http://tomjn.com/',
                   infourl: 'http://twitter.com/tarendai',
                   version: "1.1"
               };
           }
       });
       tinymce.PluginManager.add('typekit', tinymce.plugins.typekit);
   })();
   

   It inserts the typekit code inside the iframe, you’ll want to change the code to the fonts.com embed script and test. Unfortunately, I’m unfamiliar with the security safeguards at fonts.com and the exact embed codes they used

   Log in to Reply

2. If you want add your custom styles to TinyMCE editor in WordPress, you need to create a css file, for instance editor.css and put it into your theme folder. After it, add your font face initialization in this css, like this:

   @font-face {
     font-family: 'Your font name';
     font-style: normal;
     font-weight: 400;
     src: local('Your font name'), local('Your font name'), url(http://yoursite.com/path/to/your/font.woff) format('woff');
   }
   
   body {
       font-family: 'Your font name', Helvetica, Arial, sans-serif;
   }
   
   /* etc styling */
   

   Then you need to properly enqueue your editor.css file. To do it you need to call add_editor_style style function:

   add_action( 'after_setup_theme', 'wpse8170_init_editor_styles' );
   function wpse8170_init_editor_styles() {
       add_editor_style( 'editor.css' );
   }
   

   If you have .ttf font file only, you need to convert it to .woff. You can do it here.

   Log in to Reply

3. Use this function in your plugin or theme’s functions.php file:

   // Tell the TinyMCE editor to use a custom stylesheet
   add_filter('the_editor_content', "firmasite_tinymce_style");
   function firmasite_tinymce_style($content) {
       add_editor_style('assets/css/customfont.php');
   
       // This is for front-end tinymce customization
       if ( ! is_admin() ) {
           global $editor_styles;
   
           $editor_styles = (array) $editor_styles;
           $stylesheet    = array();
   
           $stylesheet[] = 'assets/css/customfont.php';        
   
           $editor_styles = array_merge( $editor_styles, $stylesheet );
   
       }
       return $content;
   }
   

   So we called a customfont.php file to wp editor. This file is a php file but will work as a css file. And this is our customfont.php:

   <?php
   /*
    * This file using for loading custom google font in wp-editor
   */
   define('WP_USE_THEMES', false);
   if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/wp-blog-header.php')) {
       /** Loads the WordPress Environment and Template */
       require($_SERVER['DOCUMENT_ROOT'] . '/wp-blog-header.php');
       status_header(200);
       header("Content-type: text/css");
   } else {
       exit;
   }
   ?>
   @import url(http://fonts.googleapis.com/css?family=<?php echo urlencode("Amarante"); ?>&subset=latin,latin-ext);
   body { font-family: Amarante,sans-serif !important;}
   

   This is an example from Firmasite theme. Maybe this will work for you. If you still getting 403, you can add some php header like header("Referer: http://example.org");

   Log in to Reply