Incorporating Unique Typography with Typekit/Adobe Fonts in Tiny MCE editor within a React

Question

Incorporating Unique Typography with Typekit/Adobe Fonts in Tiny MCE editor within a React

I'm currently working on integrating a custom Adobe Typekit font into a TinyMCE React component to customize the text styling within the editor. Here is the setup I have:

<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"]
        }}
      />

To maintain privacy, I have redacted the Typekit CSS filename, as it is specific to each user account.

The overrides.css file is structured as follows:

@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;
}

Within the <head> tag of the TinyMCE editor-generated <iframe>, there are two CSS <link> tags present in the correct sequence:

<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 have attempted to import the CSS file twice, once in the overrides.css and once in the content_css property. However, I am facing issues as the editor displays a bizarre serif font, not even the specified Arial or default 'sans-serif'.

Although the CSS stylesheets load correctly and the Adobe font is functioning on the page where the editor is placed, it does not reflect within the editor preview itself.

javascript css reactjs tinymce typekit

Answer 1

Answer №1

To implement the necessary functionality, you will have to develop a custom plugin to handle it. Initially, we will initialize the plugin using the following code:

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

Within the plugin, we need to define a function that will insert a script responsible for loading the required fonts:

function addScriptToHead() {}

Next, we will access the DOM object within the function:

var doc = editor.getDoc();

Generate a script that will be added 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\
        })();";

Include the font script:

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 );

Invoke our function:

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

The complete code snippet:

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

The idea behind this solution is something I implemented in my code a while ago, although I can't recall its exact origin.

Answer 2

To implement the necessary functionality, you will have to develop a custom plugin to handle it. Initially, we will initialize the plugin using the following code:

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

Within the plugin, we need to define a function that will insert a script responsible for loading the required fonts:

function addScriptToHead() {}

Next, we will access the DOM object within the function:

var doc = editor.getDoc();

Generate a script that will be added 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\
        })();";

Include the font script:

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 );

Invoke our function:

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

The complete code snippet:

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

The idea behind this solution is something I implemented in my code a while ago, although I can't recall its exact origin.

Incorporating Unique Typography with Typekit/Adobe Fonts in Tiny MCE editor within a React

Answer №1

Similar questions

Altering the display attribute cancels out any opacity transitions

Achieve SEO excellence with Angular 4 in production settings

Adjust the background color of Bootstrap 4 checkboxes

The NEXT.js API endpoint is not configured to handle POST requests

When deploying projects that are set up with Vercel or Next.js, the rewriting process may encounter difficulties in locating the assets path

The header component constantly refreshes upon switching routes in a React application

Is there a way to set up a linked component's peerDependencies to utilize the corresponding node_modules of the linked script?

Display additional links in Bootstrap navigation bar with a second level menu

What is the best method to create a gap between the header and table body in Angular Material version 13?

Unit testing in Jest using Luxon: Is there a way to mock the .setZone('local') function?

Adding npm packages to your Vue.js application

What could be the reason for the failure of Angular Material Table 2 selection model?

Having trouble adding a property to an object, any solutions?

Refreshing the access token in Linkedin's oauth does not result in extending the expiration time

Sending Dual Parameters to PHP File Using AJAX

Encountered an issue with md-autocomplete: Attempting to read property 'success' of an undefined element

Generating a fresh object derived from an existing object without saving any modifications

Transforming numbers into arrays in JavaScript/TypeScript for Angular 7

Vue.js is unable to render the template using Object

Link inserted in between spaces