Custom font icons don't render when I publish a structured Frame file as HTML5 help

[raylangivens]

We have a custom font set installed on Windows that we use to display icons specific to an application. I'm working with a test file in structured Frame to make sure the output generates as expected. When I print the structured Frame file (.xml file) containing the custom icon font to PDF (using the Adobe PDF printer to create a PostScript file and then the Distiller to generate the PDF), the icons render as expected. (I am using Windows 10 1803, with the latest patch.)

When I publish the same file as HTML5 help, the icons don't render. The name of the icon is displayed instead -- for example, "delete-icon" is shown instead of an image of a wastebasket.

Matt from Adobe suggested the following:

"Your HTML5 issue can be resolved if you post the images in question on your server, then modify the CSS to use them."

These aren't "images" per se. They are icons in a custom font set.

I need instructions for:

• Posting the icon font set to the server (I suspect someone on the Dev side will need to do this)
• Modifying the CSS to use the custom icon font. Please post an example showing how to do this in the CSS file.

Thank you --

Kathe

[Matt-Tech Comm Tools]

Hi Kathe,

Sorry but I don't have any samples at the ready. When I have done this in the past, I've relied upon "CSS Cookbook" and "CSS Complete Reference" from O'Reilly to accomplish.

The things I suggested are more for web pros than tech comm, so you may have to engage someone within or outside of your company to implement.

-Matt

[raylangivens]

Hi Matt,

Well, thanks for the references. I do plan to work with the UI designer of the app that uses the custom icon font. Hopefully he'll be able to help.

Kathe

[Ian Proudfoot]

Hi Kathe,

This can be done using @font-face in the CSS. I've used it in the past with an OTF icon font that I created. Seems to work very well for my client. Here's a good reference for how to do it:

CSS @font-face Rule

Good luck

~ Ian

[raylangivens]

Thanks, Ian. We’ll try that. It will probably be a while before I can get back to you to let you know if it worked.

Kathe