Custom Fonts added by CSS will not show in the Screen editor

[rsalsbery]

When changing the font on a Screen using the Custom CSS method, the Font does update the Screen but it is not reflected when looking at it in the Screen editor. See below:

Screen Editor:

Screen in View:

This case is to see if we can have custom CSS reflected in the Editor.

[cocarrig]

Loading it on page refresh would be acceptable, if live update is not feasible.

[Dan-Peck]

Successfully tested an approach to updating Custom CSS on-the-fly that should work going forward.

However, there are some inherent issues that prevent some Custom CSS from displaying as expected in the Live Editor versus the actual Screen. This does not mean it is not possible however! This means the Custom CSS will need to be written in a certain manner to achieve it and avoid side effects.

These are the recommendations:

• Avoid using the high-level, overarching BODY selector, if possible
• Instead of BODY, use #screen-container-live, #screen-container-no-edit
• More preferably, use as specific of a CSS selector as possible, in order to target only the element that actually needs to change
• Be sure to preface any selector with these as desired:
  • #screen-container-no-edit -- for the actual Screen
  • #screen-container-live -- for showing the effect within the Live Editor.

These are the reasons:

• A web page document may only have a single BODY tag. When in Live Editor mode, this BODY tag represents the entire page, including all the DAKboard User Interface along with the Live Editor area. Thus, that is never the true desired target.
• Using one or both of the "preface" selectors will prevent undesirable CSS leaking out of the Layout Editor and up into the DAKboard User Interface
• Without the preface selector, another CSS rule we have that is designed to prevent CSS leakage from the DAKboard UI down into the Live Editor area will override it, which is what causes the originally reported "symptom".

For example, I would rewrite the original CSS noted in this issue to be:

@import url('https://fontlibrary.org/face/umberto');

#screen-container-live, #screen-container-no-edit
{
  font-family: 'umberto';
}

Or, in the more preferable form, specifying only the named-block that we want to target:

@import url('https://fontlibrary.org/face/umberto');

#screen-container-live .block--MyNamedTextBlock,
#screen-container-no-edit .block--MyNamedTextBlock
{
  font-family: 'umberto';
}

NOTE: These CSS rewrites will work with existing Production code, no code changes required for that part.

[Dan-Peck]

Merged in @ 85af459 and added to the queue for upcoming release to the live site.