Adding Custom Typekit/Adobe Fonts to Tiny MCE in React

Question

I'm trying to add a custom Adobe Typekit font to a Tiny MCE React component to style the text in the editor. I have the following:

<Editor
        init={{
          allow_html_in_named_anchor: false,
          branding: false,
          plugins: [
            "autolink lists link image preview anchor",
            "searchreplace",
            "insertdatetime media table paste code"
          ],
          toolbar: "bold italic | bullist numlist",
          content_css: ["https://use.typekit.net/XXXXXX.css", "/overrides.css"]
        }}
      />

I've blanked out the Typekit CSS filename as this is account-specific.

The overrides.css file looks like:

@import url("https://use.typekit.net/XXXXX.css");
body {
  font-family: "neue-haas-grotesk-text, Arial, sans-serif" !important;
  font-size: 14px;
  font-weight: 400;
}

The <head> tag of the TinyMCE editor generated <iframe> contains two CSS <link> tags as expected in the correct order:

<link rel="stylesheet" type="text/css" id="mce-u0" crossorigin="anonymous" referrerpolicy="origin" href="https://cdn.tiny.cloud/1/k9s4r4mdxeukqc7mrign93b26zofvznzyw98lj16y5rlb73z/tinymce/5.10.3-128/skins/ui/oxide/content.min.css">

<link rel="stylesheet" type="text/css" id="mce-u1" crossorigin="anonymous" referrerpolicy="origin" href="https://use.typekit.net/XXXXXX.css">

<link rel="stylesheet" type="text/css" id="mce-u0" crossorigin="anonymous" referrerpolicy="origin" href="https://cdn.tiny.cloud/1/k9s4r4mdxeukqc7mrign93b26zofvznzyw98lj16y5rlb73z/tinymce/5.10.3-128/skins/ui/oxide/content.min.css">

I've tried importing the CSS twice, once in overrides.css and once in the content_css property. However nothing is working, and I get a strange serif font in the editor (not even Arial or the default 'sans-serif'.

The CSS stylesheets load fine and the Adobe font is working on the page the editor is in, just not in the editor preview itself.

Answer 1

you need to create a plugin to load that,

first we will initiate the plugin:

 tinymce.PluginManager.add( 'typekit', function( editor ) {}

then inside it we need to add a function that will add a script that will insert the fonts:

function addScriptToHead() {}

now, we'll get the DOM object (inside the function):

var doc = editor.getDoc();

create a script that we will then add to the header:

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\
        })();";

insert font to script:

var script = doc.createElement( 'script' );
script.type = 'text/javascript';
script.appendChild( doc.createTextNode( jscript ) );

add script to header:

doc.getElementsByTagName( 'head' )[0].appendChild( script );

call our function:

editor.onPreInit.add( function( editor ) {
            addScriptToHead();
        });

everything together:

tinymce.PluginManager.add( 'typekit', function( editor ) {
    function addScriptToHead() {
            var doc = editor.getDoc(); // gets dom element from iframe
            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\
        })();";

    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 );
}
editor.onPreInit.add( function( editor ) {
            addScriptToHead();
        });

I'm not sure where i got the idea from, but I used it in my code a long time ago.

Adding Custom Typekit/Adobe Fonts to Tiny MCE in React

Question

1 answers

solution1
0 2022-04-12 21:00:58

Adding Custom Typekit/Adobe Fonts to Tiny MCE in React

Question

1 answers

solution1 0 2022-04-12 21:00:58

solution1
0 2022-04-12 21:00:58