Search code examples
javascriptoracle-apexapex

How to add a new font family in TinyMCE for Apex 23.1


I'm using Apex 23.1 and I want to add a new font family in Tiny MCE with url file reference ! here's what I've done :

1- in Initialization JavaScript Function section

tinymce.init({
 /* ... */
 font_formats:
   "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Oswald=oswald; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats;peyda=peyda",
});

tinymce.init({
 /* ... */
 content_style:
   "@import url('#WORKSPACE_FILES#Peyda-Regular.ttf');",
});

2- in inline css section for page

@font-face{
font-family:'Peyda';
src:url('#WORKSPACE_FILES#Peyda-Regular.ttf') format('truetype') !important;
}

But it didn't apply and even i can't see my new font Peyda in font select !


Solution

  • As I asked here and Louis Moreaux had answered me there :

    for css inline section :

    @font-face {
      font-family: "Peyda";
      src: url('#APP_FILES#Peyda-Regular.ttf') format('truetype');
    }
    

    and for Initialization JavaScript Function section :

    function(options) {
        options.editorOptions.font_css = ["#APP_FILES#Peyda-Regular.ttf"]; //Reference your custom fonts **note : here I should reference the css file not the ttf** 
        // Add the font family selector
        if ( Array.isArray( options.editorOptions.toolbar ) ) { 
        options.editorOptions.toolbar.push( { name: "fontfamily", items: [ "fontfamily" ] } ); 
        } else { 
        options.editorOptions.toolbar += " fontfamily"; 
        }
    
        options.editorOptions.font_family_formats = "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats; Peyda=Peyda" // Declare the fonts ( mine is peyda the last one)
        return options;
    }
    

    special thanks to Louis Moreaux