When using the TinyMCE editor across the site, any custom CSS style definitions set in our theme cannot be used inside the editor's iframe. That prevents users from seeing what text with custom CSS styling set will actually look like.

Our particular use case is with questions in Quiz activity, using custom CSS to optimise display of other languages. Given that we are teaching ancient languages in a non-native speaking context, setting specific fonts & increasing text size is extremely helpful!

Steps to reproduce:

• Use the TinyMCE text editor on your site
• In the currently used theme, go to Advanced Settings > Raw SCSS & add a style definition to change the font and font-size for a particular class.
  • e.g. ".gentium {     font-family: "Gentium", "Athelas", "Times New Roman", serif;     font-size: 1.4rem; }

    "

• In a Quiz activity, start making a new Question & editing the Question Text.
• Use the HTML view to add a style to some text
  • e.g. <p class='gentium'>χαιρετε</p>

Expected result is that the WYSIWYG text editor will show the text as it will appear in the Quiz, with custom CSS styles applied.

Actual result is that custom CSS styles are not applied.

Quite possible that I've missed some key config or steps to make this possible, but I couldn't find anything clear or accessible about how to do this.