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 !
Ed Jones from the APEX team helped out here with this one.
Seems like maybe the attribute names have changed since whatever doc you may have looked at;
https://www.tiny.cloud/docs/tinymce/6/6.0-release-notes-core-changes/#things-we-renamed 1) You don't directly init the TinyMCE, you return an options object.
I used a different font, but the idea is the same.
Editor init JavaScript;
function(options){
options.editorOptions.font_family_formats = "Gloria Halleluja=gloria; 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";
options.editorOptions.content_style = "@font-face{font-family:'gloria';src:url(https://fonts.gstatic.com/s/gloriahallelujah/v21/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zOmvVCE.woff2) format('woff2');";
return options;
}Page CSS
@font-face{
font-family:'gloria';
src:url(https://fonts.gstatic.com/s/gloriahallelujah/v21/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zOmvVCE.woff2) format('woff2');
}(i.e. same as what you pass in content_style)