3 Replies Latest reply on Jan 4, 2016 12:38 AM by surbhi_maheshwari

    Using Google Fonts in RoboHelp 2015 / CSS Formating

    Brendon - Burning Flame

      Hey there,


      I am trying to make use of Google Fonts in a RoboHelp 2015 doc and have tried what has been suggested here - Adobe RoboHelp: Use Custom Fonts | WvanWeelden.eu and have followed the steps detailed, however have not been successful.


      I am on a Mac that has "Parallels / Win 10" installed and have checked that the fonts are installed locally in Windows (they are) and have also added them to the Baggage file as instructed.


      These fonts however do not show up Edit/Character dropdown as a selection... Like I have said, they are installed in the Win Fonts folder.


      Seems that something is not right here and I am hoping someone can shead some light on this for me.


      The other issue that I am having is related to the use of "Google Fonts" and the error message that I am getting when loading the RoboHelp file.


      I have added the "@import" link to the very top of my default css file as described in the Adobe RoboHelp: Use Custom Fonts | WvanWeelden.eu tutorial and have directly made use of the @import code generated by Google Fonts;

      @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:400,600);


      I am not sure if we are able to make use of Google Fonts in RoboHelp? Has anyone else made use of Google Fonts?


      Another question I have relates to the use of "Inline Styles"


      The file that I am working on has been supplied by a client and has extensive use of inline css styling and I am wondering if when exporting to either "Responsive HTML5 / Web Help" type files this is overwritten by the selection made as shown below;


      Or if in fact these inline styles need to be stripped out of each page in the document (over 700). Any advice relating to these matters would be greatly appreciated.




        • 1. Re: Using Google Fonts in RoboHelp 2015 / CSS Formating
          Willam van Weelden Adobe Community Professional & MVP

          Normally, the character dropdown will be filled by the fonts installed on your system. In your case, try the following:


          1. Remove the CPD and open the project again. Does that help?
          2. If 1 doesn't help, open rhfontset.apj and add your fonts in there. Remove the CPD and open the project. That should open it again.


          RoboHelp doesn't correctly recognize the @import rule. Please try installing the fonts on your computer as that may alleviate the issues. Personally, I use a different CSS in the output with all the bells and whistles while in RoboHelp I use just what RH gives me.


          As for the inline styling, it will not get overwritten by your selection. You will have to remove the styling instead. I do have a script lying around that can do this for you. But because it's very thorough and dangerous, I haven't published it on my site. Please contact met at contact [at] wvanweelden [dot] eu and I'll send you the script.

          • 2. Re: Using Google Fonts in RoboHelp 2015 / CSS Formating
            Brendon - Burning Flame Level 1

            Hey there Willam,


            Thanks for the reply! When you reference the CPD file, I assume that you are referring to the "Clear Project Cache" .cpd file?


            I have also tried to make use of the inbuilt "Find And Replace" tool in RoboHelp for editing the inline styling and this seems to be broken and in my opinion should be removed from the App until it actually preforms the way it is supposed to. It give a result and says it has found and replaced items, but nothing actually gets edited.... Lol!


            Hopefully Adobe will look into providing an effective way to make use of the @import rule used in there other apps, especially when it comes to the output of Responsive HTML5 variants of the documents created in the RoboHelp app.


            Also, with respect to the styling you refer to "different CSS in the output with all the bells and whistles" Are you applying this within the output process here;



            Another thing that I am trying to do is to add the Responsive HTML5 files to a section in an Adobe Business Catalyst site... but I really want to make use of pre-configured "Content Holders" from BC. I have achieved this with mixed results thus far, but its not quite want I want. What I really want to do is to make use of the sites "Header and Footer" page sections so that the RoboHelp file looks like its part of the site and not just something that is an after thought... I have tried applying a BC page template to the RoboHelp files from within BC, but this only works for the first page and not any other pages while clicking thru the RoboHelp file. I am wondering if I was to insert the BC code into the RoboHelp header and footer it would overcome these issues or make use of the RoboHelp snippets?


            Have you or any other RoboHelp users done this previously?


            I will also send you an email with the view of getting a copy of the script for removing the RoboHelp inline style formatting which will be helpful.


            Thank you for your help, its really appreciated!




            • 3. Re: Using Google Fonts in RoboHelp 2015 / CSS Formating
              surbhi_maheshwari Adobe Employee

              Hi Brendon,


              To remove inline styles, we have a script which you can use.

              Contact me at sumahesh@adobe.com so that I can send you the script.



              Surbhi Maheshwari