Question

Problem with new font in paragraph Rich Text Editor

Hi all,

I imported a new font in Pega. I visualize it correctly in my skin, but when I try to import it in RTE with the rule UserWorkForm, I see it in the menu but it seems a default font.

There is something wrong? Can someone help me?

Thanks in advance.

Correct Answer
October 11, 2019 - 1:40am

Below is an example to add Marry Ann font in Rich Text Editor. User has .otf files of the custom font. 

Add the following code in userWorkForm:
 
<script>
window.customCKEditorFonts = 'Marry Ann/marryAnnCustomefont;Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif';
  pega.u.d.attachOnload( function() {
   debugger;
   if(typeof CKEDITOR != 'undefined'){
    CKEDITOR.on('instanceReady', function(evt) {
      var editor = evt.editor;
  $(editor.document.$.body).append("<style>@font-face {font-family: \"marryAnnCustomefont\";src: url(webwb/pzfontMaryAnnRegular.otf);src: local(\"marryAnnCustomefont\"), url(\"webwb/pzfontMaryAnnRegular.otf\") format(\"opentype\");}</style>");
    });
   }
});
</script>
 
Note : font file has to be in this case webwb/pzfontMaryAnnRegular.otf
 

Comments

Keep up to date on this post and subscribe to comments

October 11, 2019 - 12:12am

Pega
October 11, 2019 - 1:40am

Below is an example to add Marry Ann font in Rich Text Editor. User has .otf files of the custom font. 

Add the following code in userWorkForm:
 
<script>
window.customCKEditorFonts = 'Marry Ann/marryAnnCustomefont;Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif';
  pega.u.d.attachOnload( function() {
   debugger;
   if(typeof CKEDITOR != 'undefined'){
    CKEDITOR.on('instanceReady', function(evt) {
      var editor = evt.editor;
  $(editor.document.$.body).append("<style>@font-face {font-family: \"marryAnnCustomefont\";src: url(webwb/pzfontMaryAnnRegular.otf);src: local(\"marryAnnCustomefont\"), url(\"webwb/pzfontMaryAnnRegular.otf\") format(\"opentype\");}</style>");
    });
   }
});
</script>
 
Note : font file has to be in this case webwb/pzfontMaryAnnRegular.otf
 

October 11, 2019 - 4:25am
Response to SusanLiu

Thanks a lot! It worked for me!

If someone has my same problem, in my case this is my script:

<script>
window.customCKEditorFonts = 'RifficBold/RifficBoldImported;Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif';
  pega.u.d.attachOnload( function() {
   debugger;
   if(typeof CKEDITOR != 'undefined'){
    CKEDITOR.on('instanceReady', function(evt) {
      var editor = evt.editor;
      $(editor.document.$.body).append("<style>@font-face {font-family: \"RifficBoldImported\";src: url(\"webwb/font-RifficBold.ttf?\") format(\"truetype\");font-weight: normal; font-style: normal;}</style>");        
   });
}});
</script>