Jump to content

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


Recommended Posts

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:

image.png.eebe8164ab91e32663ee2e26caae54e8.png

Where can I change these styles?

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

Link to comment
Share on other sites

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"
}

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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?

image.png.fbb824e15f1af0844ded465086443070.png

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 */
  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...).

  • Like 1
Link to comment
Share on other sites

Hi,

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

image.png.2c1c0b8e7d84a8afac14dff10bbc4720.png
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

  • Like 1
Link to comment
Share on other sites

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.

image.png.3d2ebf90a22e6b47d8e9734beb5111da.png

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!

image.png.0b3198622e665896e048cda8140cca09.png


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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...