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?

  • 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 '12 at 6:24
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.

| improve this answer | |
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)

| improve this answer | |
  • | Thanks - it's not clear quite where to place that - the ckeditor.js file is compressed - or how. – 4midori Dec 4 '12 at 2:51
  • I updated my answer for the current Wygwam. I hope it works for you. – Dennis Frank Dec 4 '12 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 '12 at 22:10
  • Have you added the dev domain to your Typekit configuration? – Dennis Frank Dec 5 '12 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. – Brian Litzinger Jan 16 '13 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.

| improve this answer | |
  • 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); – Peter Lewis Jun 30 '17 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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