Non-standard fonts in Frameless output

[robertp10792544]

I recently opened a project using RoboHelp 2020 (new UI) after changing my hard drive and found that the frameless output was using a default Times New Roman font, not the original fonts I had selected. I then remembered that I hadn't resinstalled the required fonts (they are non-standard ones used by my client in their web app). Once I had installed them on the PC, everything was fine but it made me stop and think, will the output display correctly in another user's browser if they don't have the fonts installed either? Looking through the forums I see that some formats require custom fonts to be embedded or added to baggage files, but I can't see a why of doing either of these in the Frameless output in RH 2020. Am I worrying unnecessarily or do I need to do something before compiling to avoid this problem, and if so, what is it please?

[Peter Grainge · Accepted solution]

This page on my site explains how to use @Font-face so that all users will see the desired font.

Using Font Awesome, Google Fonts, @font-face and SVGs in RoboHelp (grainge.org)

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[robertp10792544]

Thanks for that Peter. That has worked very well for the topic text and headings etc. I'm now trying to apply the same idea to the skin, i.e., the heading banner, table of contents, button labels in the frameless output layout. I've found the layoutDiff CSS file in the Publish folder so I'm experimenting to see if the same logic can be applied here. (I selected the custom font in RoboHelp as the skin layout font but now I have uninstalled the fonts from my PC it doesn't display properly.) So far I've managed to change the main header font only but I'm still working on it. I notice that there is a layout CSS file in the output folder which I guess is generated whenever the project is published, so it doesn't make any sense to change that presumably?  If you have any tips on this as well I would appreciate it!

[robertp10792544]

Just as a follow-up to my earlier post, I was able to change the skin font by modifying the layoutDiff CSS file in a similar way as for the content CSS. Basically I added the font family to every 'container' mentioned in the file and eventually that changed all the screen sections to be the custom font I wanted. Not a very elegant approach but apparently effective!

[Peter Grainge]

See if Item 15 in Snippets (grainge.org) works.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information