Stefanowitsch Posted Thursday at 06:47 AM Share Posted Thursday at 06:47 AM 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. Link to comment Share on other sites More sharing options...
dynweb Posted Thursday at 07:20 AM Share Posted Thursday at 07:20 AM 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" } 1 1 Link to comment Share on other sites More sharing options...
Stefanowitsch Posted Thursday at 07:26 AM Author Share Posted Thursday at 07:26 AM 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? Link to comment Share on other sites More sharing options...
dynweb Posted Thursday at 07:54 AM Share Posted Thursday at 07:54 AM 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 */ 1 Link to comment Share on other sites More sharing options...
Stefanowitsch Posted Thursday at 08:32 AM Author Share Posted Thursday at 08:32 AM 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 More sharing options...
dynweb Posted Thursday at 10:05 AM Share Posted Thursday at 10:05 AM 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...). 1 Link to comment Share on other sites More sharing options...
virtualgadjo Posted 13 hours ago Share Posted 13 hours ago 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now