Highlighted

Rh 2017 responsive HTML output doesn't render a common font

Explorer ,
Jan 16, 2018

Copy link to clipboard

Copied

I created my project in Rh 2015 and used a multiscreen HTML output, but upon upgrade to Rh 2017 I would like to use a responsive HTML output.

When generating the responsive HTML output, a font in the topic pages does not render correctly, specifically, Arial Narrow. I have Arial Narrow baggage files in the project, so I am not sure why the responsive HTML output won't render it even as the multiscreen HTML output looks fine.

Multiscreen HTML

multiscreen-html.png

Responsive HTML

responsive-html.png

The responsive HTML skin looks just fine, BTW. No complaints. It's just the rendition of Arial Narrow in the topic pages that has me baffled.

TOPICS
HTML5 layout

Views

337

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Rh 2017 responsive HTML output doesn't render a common font

Explorer ,
Jan 16, 2018

Copy link to clipboard

Copied

I created my project in Rh 2015 and used a multiscreen HTML output, but upon upgrade to Rh 2017 I would like to use a responsive HTML output.

When generating the responsive HTML output, a font in the topic pages does not render correctly, specifically, Arial Narrow. I have Arial Narrow baggage files in the project, so I am not sure why the responsive HTML output won't render it even as the multiscreen HTML output looks fine.

Multiscreen HTML

multiscreen-html.png

Responsive HTML

responsive-html.png

The responsive HTML skin looks just fine, BTW. No complaints. It's just the rendition of Arial Narrow in the topic pages that has me baffled.

TOPICS
HTML5 layout

Views

338

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 16, 2018 0
LEGEND ,
Jan 16, 2018

Copy link to clipboard

Copied

Out of curiosity, have you tried copying the CSS from the source location to the output location where it replaces the output CSS?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 16, 2018 0
Explorer ,
Jan 16, 2018

Copy link to clipboard

Copied

The output CSS folder (/!ScreenLayout!/<layout name>) contains layout.css and layout-rtl.css, both of which define the navigational elements, not the paragraphs and characters.

When I copied my default CSS (not named default) to the output folder, the rendering of Arial Narrow remained unchanged. Copying default.css to the output folder likewise made no difference.

When I changed the Headings to Arial instead of Arial Narrow, the font was properly rendered, so it's not a CSS problem but a font problem, I reckon.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 16, 2018 0
Adobe Community Professional ,
Jan 17, 2018

Copy link to clipboard

Copied

Have a look at the output topic pages' HTML - there used to be a bug that made a reference to 2 CSS files in the HTML; you could edit the HTML code to kill off one reference or just do a mass delete of all the extraneous CSS files, which left only the one you wanted still active in your topic.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2018 0
Explorer ,
Jan 17, 2018

Copy link to clipboard

Copied

Do you mean this?

css-output.png

That's two references to the CSS file that I use. Could that cause the problem?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2018 0
Adobe Community Professional ,
Jan 17, 2018

Copy link to clipboard

Copied

Yes - see if there's multiple copies of that deepsee.css file kicking around in your output folders

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2018 0
Explorer ,
Jan 17, 2018

Copy link to clipboard

Copied

No, there's just one sitting where it's supposed to be.

It doesn't seem to be a CSS problem, because I can change the font to something else — Curlz, for example — and the change is picked up just fine in the output.

Do I need new font files for Arial Narrow? It's strange that only that particular font won't render, but all of the others seem to, and only with the responsive HTML output.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2018 0
Adobe Community Professional ,
Jan 17, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2018 0
Explorer ,
Jan 17, 2018

Copy link to clipboard

Copied

Oh hey that worked! I had the font file as a baggage file, but not the font definition in deepsee.css. (It was in default.css.)

Thanks!

UPDATE (the next day): My glee was premature. I generated responsive HTML and the font rendered successfully, leading to my above response. Then I generated it again about an hour later and the same problem emerged.

In the meantime, our Ux person suggested using Roboto, it being the font used by the GUI for the product.

I installed Roboto TTF files on my Windows 10 workstation and rebooted. Then I added all of the Roboto TTF files to the baggage files, and then added the font-family definition to the CSS, thus:

roboto-font.png

The Roboto fonts are consequently displayed in the Styles definition dialog.

styles.png

But the Font selector does not recognize the font family.

styles-a.png

[Edited] What does that mean?

Note also that the character font definition is not being properly rendered still. The font in the marked area is supposed to be Roboto Medium but it's showing a serifed font instead.

roboto-char-style.png

What am I missing?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2018 0