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.
you need to create a plugin to load that,
first we will initiate the plugin:
then inside it we need to add a function that will add a script that will insert the fonts:
now, we'll get the DOM object (inside the function):
create a script that we will then add to the header:
insert font to script:
add script to header:
call our function:
everything together:
I'm not sure where i got the idea from, but I used it in my code a long time ago.