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

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="https://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


Leave a Comment