• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Custom font icons do not render in Word output

Contributor ,
Sep 04, 2023 Sep 04, 2023

Copy link to clipboard

Copied

Context

We use custom fonts in the company to make use of a plethora of icons.

These fonts are imported in the CSS files:

 

Err1.png

Err2.png

 

... and used when writing instructions:

 

Err4.png

Err3.png

 

The problem

Publishing this topic with a Frameless output preset or a PDF output preset successfully shows this custom font icon. However, the Word output preset does not. Is there a way to make custom fonts work for Word outputs?

 

(PDF)

 

Err5.png

 

(Word)

Err6.png

Views

270

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
community guidelines

correct answers 1 Correct answer

Community Expert , Sep 04, 2023 Sep 04, 2023

I think you are right in that the conversion to Word doesn't support the pseudo-classes. The only analogue I can think of for "before" is numbering and bullets. I can't think of one for "after".

 

If the font awesome and google fonts sample doesn't work the only Robohelp solution I can think of is to include an image after every link, and apply a condition to it which you exclude from every output except Word. Not very convenient, I know.

 

Other than that, maybe a VBA script you run in the Word

...

Votes

Translate

Translate
Community Expert ,
Sep 04, 2023 Sep 04, 2023

Copy link to clipboard

Copied

For online and PDF it is possible to use fonts that are not installed on the end user's device. I'm pretty sure that is not the case with Word documents.

 

Have you installed the font(s) on a machine to see if that fixes it to confirm my guess?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

 

 

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Contributor ,
Sep 04, 2023 Sep 04, 2023

Copy link to clipboard

Copied

Hi, thanks for answering.

I can confirm that the font shows up in Control Panel\Appearance and Personalization\Fonts. It also shows up in Word:


Err7.png

Another possible cause is that I might have botched the layout.css for the Word preset:

 

Err8.png

Votes

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
community guidelines
Community Expert ,
Sep 04, 2023 Sep 04, 2023

Copy link to clipboard

Copied

Try in content.css.

 

Also are you mapping to a Word template with that font defined?

 

My other thought is if you get it working in Word on your machine, I don't think it will work if you send it some who doesn't have the font installed.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Contributor ,
Sep 04, 2023 Sep 04, 2023

Copy link to clipboard

Copied

I've tried the following in the meantime:

  • Copy the custom font CSS to content.css
  • Output without any template
  • Output with a template (the font is visible when checking fonts)
  • Create a fresh test project and test with various settings

 

As a second test, I downloaded a random custom font (https://www.dafont.com/font-comment.php?file=old_london) and tried to output that font in Word - this succeeds, so I assume it's something with the font itself / the ::before CSS code / the svg font files.

 

PS: The font install problem won't be an issue as the Word version is only needed for internal purposes.

Votes

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
community guidelines
Contributor ,
Sep 04, 2023 Sep 04, 2023

Copy link to clipboard

Copied

My current hypothesis is that Word output is not very happy with the CSS content attribute in a pseudo class.

If I force the following CSS:

WoutJacobs_0-1693830010576.png

 

WoutJacobs_1-1693830120464.png

 

The Word output looks as follows:

WoutJacobs_2-1693830166259.png

 

Votes

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
community guidelines
Community Expert ,
Sep 04, 2023 Sep 04, 2023

Copy link to clipboard

Copied

As a yardstick, try the project at Using Font Awesome, Google Fonts, @font-face and SVGs in RoboHelp (grainge.org) and see if it works or mirrors what you are getting.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Contributor ,
Sep 05, 2023 Sep 05, 2023

Copy link to clipboard

Copied

Thanks for the suggestion. Unfortunately the company style guide insists that we use our custom icons, but it might be useful for future reference.

Votes

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
community guidelines
Community Expert ,
Sep 05, 2023 Sep 05, 2023

Copy link to clipboard

Copied

I think Peter was suggesting you see if printing the symbols to Word in the sample project works. If it does that would indicate some problem in your setup.

Votes

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
community guidelines
Community Expert ,
Sep 05, 2023 Sep 05, 2023

Copy link to clipboard

Copied

LATEST

Yes use my project and set things up afresh rather than copy them in.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Community Expert ,
Sep 04, 2023 Sep 04, 2023

Copy link to clipboard

Copied

I think you are right in that the conversion to Word doesn't support the pseudo-classes. The only analogue I can think of for "before" is numbering and bullets. I can't think of one for "after".

 

If the font awesome and google fonts sample doesn't work the only Robohelp solution I can think of is to include an image after every link, and apply a condition to it which you exclude from every output except Word. Not very convenient, I know.

 

Other than that, maybe a VBA script you run in the Word doc after generating?

Votes

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
community guidelines
Contributor ,
Sep 05, 2023 Sep 05, 2023

Copy link to clipboard

Copied

I've been leaning to method 2 (post-processing in the Word doc).

 

Unfortunately, the resulting Word document does not contain any trace of the glyphicon (in HTML, it's after all just an 'empty' <span class="glyphicon-X">/span> element and I can't seem to assign a Word style to nothing). So I first have to add in the glyphicon classes as text in the span element in Robohelp with a script, generate the Word doc (and discard the changes afterwards with Git).

 

Then I can use search + replace to replace all instances of the glyphicon text with the glyphicon itself. I guess this workaround is acceptable since we'll only publish to Word once in a blue moon.

Votes

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
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp