5

enter image description here

I use custom CSS for WYGWAM fields.

I can use @font-face, but what if I want to use fonts via Typekit, is there a way to pull them in?

1
  • Did any of the answers help you? If yes, please mark the answer correct by clicking on the checkmark to the left of the answer.
    – Anna_MediaGirl
    Dec 22, 2012 at 6:24

3 Answers 3

5

You can also swap to the very similar addon Wyvern, by BoldMinded, which has Typekit and Google Fonts support built in via the settings screen.

0
14

There is a one year old thread on Pixel&Tonic’s support forum.

To use Typekit with Wygwam/CKEditor you have to include two scripts in your <head>:

<script type="text/javascript" src="//use.typekit.net/XXXXXXXX.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

Scott Wise figured out this hack:

I figured out a rough injection for the time being. In /themes/third_party/lib/ckeditor/ckeditor.js, on line 9 there is an array push into the header that defines the CSS (presumably whatever is defined in the contentsCss property):

h.push('');

I simply added another push() immediately following that (with both scripts I need in one string), and now I've got my scripts into each instance of the iFrame, fully functional!


Update: It seems that ckeditor.js (Wygwam 2.6.3) has changed since the forum thread.

You can try this:

In ckeditor.js replace

else k.push('<link type="text/css" rel=stylesheet href="'+j+'">');

with

else k.push('<script type="text/javascript" src="//use.typekit.net/XXXXXXXX.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script><link type="text/css" rel=stylesheet href="'+j+'">');

(XXXXXXXX = the string from your Typekit embed code)

9
  • | Thanks - it's not clear quite where to place that - the ckeditor.js file is compressed - or how.
    – 4midori
    Dec 4, 2012 at 2:51
  • I updated my answer for the current Wygwam. I hope it works for you. Dec 4, 2012 at 4:25
  • Unfortunately that didn't work for me - have you gotten it to cooperate? I wonder if the problem is I'm calling the script from a dev domain, not the final one.
    – 4midori
    Dec 4, 2012 at 22:10
  • Have you added the dev domain to your Typekit configuration? Dec 5, 2012 at 8:32
  • 1
    I would be surprised if a hack like this would work reliably. When I was adding Typekit support to Wyvern this sort of approach did not work. I spent more than 40 hours trying to get this to work, and the final solution was more involved than this. If memory serves me correctly it has something to do with a cross-domain request from within an iframe that is rendered to the page via JS. Jan 16, 2013 at 16:56
4

Instead of modifying CK Editor files which would likely get nuked if you update the add on you are best to make a customConfig in the Editor Configurations.

Change this and save this out to where you keep your front-end templates.

var typkitID = 'XXXXXX';

CKEDITOR.on(
   'instanceReady',
   function(ev) {
      var $script = document.createElement('script'),
         $editor_instance = CKEDITOR.instances[ev.editor.name];

      $script.src = '//use.typekit.com/'+typkitID+'.js';
      $script.onload = function() {
         try{$editor_instance.window.$.Typekit.load();}catch(e){}
      };

      $editor_instance.document.getHead().$.appendChild($script);
   }
);

Then in the editor Modules > WygwamEditor > Configurations > CONFIG-NAME

Change custom Config to use out typekit config.

You will also need to point the editor to your CSS file and likely use a bodyClass.

1
  • 3 years on, in case this is useful to anyone else, I could only get this to work by changing the last line injecting into head to: $editor_instance.document.appendStyleSheet($script.src); Jun 30, 2017 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.