Uploaded image for project: 'In-Portal CMS'
  1. In-Portal CMS
  2. INP-1158

Allow using Typekit font library in CKEditor/Front-End

    XMLWordPrintable

    Details

    • Type: Feature Request
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 5.2.0
    • Fix Version/s: 5.2.1-B1
    • Component/s: CMS
    • Labels:
      None

      Description

      There is an Adobe website called Typekit - https://typekit.com/, which allows you to use custom nice looking fonts on your website.

      To use it you need first to generate a typekit and then it it's ID in following JavaScript code that should be present on all pages:

      <script type="text/javascript" src="//use.typekit.com/TYPEKIT_ID_HERE.js"></script>
      <script type="text/javascript">try

      {Typekit.load();}

      catch(e){}</script>

      However, when you try to edit content blocks of website, these nice fonts won't be working inside CKEditor. To make them work we need some extra JavaScript code to be added into Admin Console:

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

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

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

      As you can see both code fragments share TYPEKIT_ID_HERE, which we can move out into a new system setting. When preset we can make CKEditor use it automatically.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                alex Alex
                Reporter:
                alex Alex
                Developer:
                Alex
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: