Re: Defining the font of the editor in Guided LP templates

Grégoire_Miche2
Level 10

Defining the font of the editor in Guided LP templates

We have some guided LP templates where the text is OK when we display a page using the template, but if we edit the template and then the text zone, the text appears in a different font.

Editor:
pastedImage_0.png

Page:

pastedImage_1.png

HTML code in the editor:

pastedImage_2.png

How are the fonts used in the editor set? Is there anything specific we need to do to make sure the fonts in the editor are the same as in the page rendering?

Justin Cooperman​, you may have some insight on this

Thx in advance.

-Greg

12 REPLIES 12
Justin_Cooperm2
Level 10

Re: Defining the font of the editor in Guided LP templates

Can you give a little more info about the repro steps for what you're doing? I don't completely follow.

Dan_Stevens_
Level 10 - Champion Alumni

Re: Defining the font of the editor in Guided LP templates

All you need to do is edit a guided LP and edit some of the copy on the page.  Here's the same behavior we see (where the text editor completely wipes everything of all formatting):

pastedImage_0.png

Justin_Cooperm2
Level 10

Re: Defining the font of the editor in Guided LP templates

But, I need repro steps. Are you saying that you just don't like that the text editor window shows you the font differently than what you'll see after clicking "Save" on the actual page? Or are you saying the resulting page gets messed up? I'm not 100% clear on where the issue is.

Dan_Stevens_
Level 10 - Champion Alumni

Re: Defining the font of the editor in Guided LP templates

Yeah, it's more of an interface issue.  The expectation would be for the formatting in the editor to match the formatting of the actual text (like it still does in the legacy LP editor).  Now where this is an issue is when dealing with white colored text.  If you try to edit it, you won't see it in the editor.  What would be ideal would be having the editor function just like the legacy editor, except use a light gray background so that white text can be seen.

Here's what the legacy LP editor looks like:

pastedImage_0.png

Anonymous
Not applicable

Re: Defining the font of the editor in Guided LP templates

Is the styling being applied directly in the Rich Text element (inline styles) in the legacy version but at the Landing Page level on the new editor? That might also cause this...

Dan_Stevens_
Level 10 - Champion Alumni

Re: Defining the font of the editor in Guided LP templates

In both the examples I provided, styling is being applied in the editor (using global CSS styles defined at the template level).

Grégoire_Miche2
Level 10

Re: Defining the font of the editor in Guided LP templates

Hi Justin,

As Dan wrote. Styles are being defined at template / CSS level, not inlined. So everything is correct when displaying the page.

But when we edit the text, the styles are not applied and, as a result, users see other fonts, other colors (!mostly black), etc... And they tend to start playing with the fonts, the sizes and the colors, create more a mess than anything else .

-Greg

SanfordWhiteman
Level 10 - Community Moderator

Re: Defining the font of the editor in Guided LP templates

The cause of this frustrating behavior is simple.

The editor is renderd in an IFRAME.  IFRAMEs never inherit styles from their parent document; those styles need to be set on the IFRAME's document. (The editor IFRAME is actually a child of the main editor wrapper document, but even if it were a direct child of the Landing Page editor frame, this would still be the case.)

TinyMCE makes a well-intentioned effort to copy recognized styles into the editor IFRAME, but it doesn't work reliably, especially for non-standard web fonts.

We get around this by injecting our global CSS file into the editor IFRAME, so otherwise unstyled text gets the the intended styles instead of browser defaults.

tinymce_injected_font_css.png

Grégoire_Miche2
Level 10

Re: Defining the font of the editor in Guided LP templates

Hi Sanford,

We get around this by injecting our global CSS file into the editor IFRAME

how do you do this in Marketo LP editor?

-Greg