The default email-frame.less sets some pretty opinionated styles for the rendered content of email messages themselves, including hard-coding the use of the Nylas-Pro font:
I’m working on a theme that uses the system-ui font throughout, instead of Nylas-Pro, but I can’t see a way to customise or override this line, which gets loaded inside the message iframe. My theme’s index.less isn’t loaded inside the iframe – it looks like the only thing that gets injected is app/static/style/email-frame.less.
Has anyone found a way to customise the styles inside the message iframe?
Ah …I was using an index.less file to import the the email-frame.less file. That doesn’t work.
Just in case someone else out there missed this concept like I did. If you include an index.less file in your custom style directory then all CSS customizations are consolidated into one master file.
However, to update the email body (which is an iframe) you need to load the email-frame.less file separately for it to take priority within the iframe.