Change default font family to "webfont" for TinyMCE Editor fieldds

[Stefanowitsch]

Hello!

Has anybody tried this?

I want to apply the webfont family that I am using in the frontend of my website to the TinyMCE styles. Per default the editor uses it's own custom stylesheet that defines own font families. So you always this look out of the box:

Where can I change these styles?

The editor area is embedded via an iframe so external style rules won't apply.

[dynweb]

You can use our own stylesheet for the TinyMCE editor. In the TinyMCE settings, field "Default setting overrides JSON text", you can add something like this:

{
	"replace_content_css": "/site/css/tiny.css"
}

 

[Stefanowitsch]

Great! This is working. Thank you.

Another question. The new styles don't apply to the dropdown menu stylings. Where can I alter those styles so the headlines also use the webfont?

[dynweb]

24 minutes ago, Stefanowitsch said:

Another question. The new styles don't apply to the dropdown menu stylings. Where can I alter those styles so the headlines also use the webfont?

This can be done in the "Custom style formats CSS" field. Something like this to change a <h1>:

#Headings h1 { font-size: 1.8rem; line-height: 1.1; text-transform: uppercase} /* My headline 1 */

[Stefanowitsch]

39 minutes ago, dynweb said:

This can be done in the "Custom style formats CSS" field. Something like this to change a <h1>:

#Headings h1 { font-size: 1.8rem; line-height: 1.1; text-transform: uppercase} /* My headline 1 */

Yes that works but my problem is - if define a custom font-family here like this:

#Headings h1 { font-family: 'myWebFont' } /* My headline 1 */

The stylesheet does not know where and how 'myWebFont' is defined. 

I need to place this information somewhere in the stylesheet that the editor is using to make it work:

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'myWebFont';
  font-style: normal;
  font-weight: 400;
  src: url('/site/templates/fonts/barlow-condensed-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

I added this @font-face declaration to my custom editor body stylesheet and it is working there. But not in the Headings Dropdown menu.

[dynweb]

Yes, it seems that font-family declarations do not work here.

To style the headings menu entry, TinyMCE takes the corresponding font-family from your content_css (in this case: whatever you defined for h1) and applies it inline. But webfonts are not displayed, only the font fallbacks (Arial, sans-serif...).

[virtualgadjo]

Hi,

just my two cents ?
to do all of this i simply use the tinytmce module config abilities

and then in this css file i simply import my fonts.css or, depending of their number define my fontfaces as in the font side
afterwards, il can, exactly like on the front end, set all the rules i want to be applied in tinymce for the h, the classes and so on

have a nice day

[howdytom]

In my case I do use the default wire SCSS files as a starting point by copying files from /site/modules/InputfieldTinyMCE/content_css to my template.

Next, I add the @font-face to _vars.scss. Additionally you can adjust your heading and inline block styles. Personally, I do prefer to set those styles globally in the css file than in PW TinyMCE settings and it is completely separated from PW core updates.

Finally, as @virtualgadjo mentioned you can set your custom css file. And voilà! All webfonts including custom css heading style show up beautiful in TineMCE editor and also show up in the dropdown menu!

I find it much more intuitive to work with custom TinyMCE editor styles than in CKEditor. I don't have to override the CKEditor dropdown menu view.