25 Replies Latest reply on Nov 1, 2013 12:33 PM by BonnieM

    Fonts not visible on everyone else's workstation

    BonnieM Level 1

      I have a couple of fonts (corporate mandated) that are not installed on anyone else's workstation but mine.

       

      After the help files are generated  (HTML5 Multiscreen, desktop) and rolled into the software build, I am the only one who can see the fonts properly. On everyone else's workstation, the fonts are not present.

       

      (One of the fonts is Arial Narrow, which I thought everyone had. Go figure.)

       

      How do I embed the fonts in the output such that they show up the same for everyone? (The corporate website using those fonts looks right on the workstations where my help files look wrong.)

       

      I'm almost embarrassed to ask because it sounds so elementary.

       

      Thanks!

        • 1. Re: Fonts not visible on everyone else's workstation
          Willam van Weelden Adobe Community Professional & MVP

          This is in no way elementary, so no need to be embarassed.

           

          To do this, you must add a font-face rule to your style sheet. You must do this manually. This goes as follows:

          1. Add the font files (ttf and eof) as a baggage file of your project.

          2. Open your CSS and add the following code (replace the file name with the actual file name):

           

          @font-face {

               font-family: "Arial Narrow";

               src: url('arialnarrow.ttf'),

               src: url('arialnarrow.eot');

          }

           

          Now everywhere you use the font family "Arial Narrow" in the CSS, the browser will pick it up.

           

          Of course, IE8 doesn't support it and IE9 only supports eot fonts. For all the deatils, see www.w3schools.com/cssref/css3_pr_font-face_rule.asp

           

          One note: Check the license of your files. If it's in the CSS anyone can download the font and install it if they know how to find it. You license may not allow you to distribute the font. But that's legal hassle.

           

          Greet,

           

          Willam

          • 2. Re: Fonts not visible on everyone else's workstation
            BonnieM Level 1

            RH10 doesn't seem to have a baggage files folder. I toggled the Project Manager view and looked at View Pods and got bupkis.

             

            So I copied the font files to the top level of my project folder and I'm hoping for the best.

             

            Of course, IE8 doesn't support it and IE9 only supports eot fonts.

             

            I guess this is where we post the relevant XKCD comic, sigh heavily, and move on: http://xkcd.com/927/

             

            Thanks so much. I'll ask more questions if this doesn't come off.

            • 3. Re: Fonts not visible on everyone else's workstation
              BonnieM Level 1

              OK, I tried putting the fonts in the top level of my project (same as the CSS) in the !ScreenLayout! folder and the !ScreenLayout!\Desktop_Layout folder, and now the browser doesn't know where to find the fonts.

               

              Does the url(<filename>) definition accept file paths? If so, which is the root folder?

              • 4. Re: Fonts not visible on everyone else's workstation
                Captiv8r Adobe Community Professional & MVP

                Hi there

                 

                Try as you might, unless you specifically created a folder and gave it the name "Baggage", you will not find such a folder in a RoboHelp HTML project. This is totally normal. Baggage files is more of a concept than anything else, To add a Baggage file, right-click the Project Files and you should see an option on the context menu to add a baggage file.

                 

                Cheers... Rick

                • 5. Re: Fonts not visible on everyone else's workstation
                  Jeff_Coatsworth Adobe Community Professional & MVP

                  You didn't have to do that - just add them to the Baggage files - inside RH - and then follow Willam's instructions for editing the CSS you're using to tell the world about your fonts.

                  • 6. Re: Fonts not visible on everyone else's workstation
                    Captiv8r Adobe Community Professional & MVP

                    Sorry, but I slightly misspoke. Actually, RoboHelp HTML allows you to view the Project Files pod in two different ways, In Classic view, you WILL actually see a "folder" named Baggage. But that's really not a folder. It's simply a way that RoboHelp organizes the files in the project and presents them to you inside RoboHelp.

                     

                    Cheers... Rick

                    • 7. Re: Fonts not visible on everyone else's workstation
                      Jeff_Coatsworth Adobe Community Professional & MVP

                      @Rick - sorry I didn't see you there in time (stupid Conversation view in web Outlook!)

                      • 8. Re: Fonts not visible on everyone else's workstation
                        BonnieM Level 1

                        I just did the following:

                         

                        Switched to the view that shows the folder called "Project Files."

                         

                        Right-clicked said folder and selected "New > Baggage File"

                         

                        Selected the font files. (RH copied the font files to the top-level folder of the project.)

                         

                        Cannot see anything called "Baggage" in either view. I generated the files anyway and still the fonts are wrong.

                         

                        I closed RH and opened it again, in case I needed a refresh. No "Baggage" folder seen.

                        • 10. Re: Fonts not visible on everyone else's workstation
                          BonnieM Level 1

                          Alas:

                           

                          pm-00.png

                           

                          pm-01.png

                           

                          I'm poking through my preferences to see if something needs to be enabled or disabled.

                           

                          Also:

                          pm-02.png

                           

                          I love it when this kinda thing happens.

                          • 11. Re: Fonts not visible on everyone else's workstation
                            Captiv8r Adobe Community Professional & MVP

                            My guess here is that at some point you or someone clicked the funnel icon and had a play.

                             

                            tmp1.PNG

                             

                            See if that's what you find... Rick

                            • 12. Re: Fonts not visible on everyone else's workstation
                              BonnieM Level 1

                              YES! There it is!

                               

                              The fonts are listed as baggage files.

                               

                              So I generated the content again and…

                               

                              …no dice.

                               

                              pm-03.png

                               

                              Behold the font files and the default.css.

                               

                              What have I done wrong? I'm viewing them in Firefox 24.

                              • 13. Re: Fonts not visible on everyone else's workstation
                                BonnieM Level 1

                                Firebug shows this:

                                pm-04.png

                                That's what League Gothic looks like, but I can't tell if Firebug is drawing from my desktop or what.

                                • 14. Re: Fonts not visible on everyone else's workstation
                                  BonnieM Level 1

                                  My latest go seems to have worked. Maybe it just needed to sit for awhile and contemplate the new CSS.

                                  • 15. Re: Fonts not visible on everyone else's workstation
                                    Willam van Weelden Adobe Community Professional & MVP

                                    A bit late to the party, but you can add a file path or complete URL to the file. The file path is relative from the location of the CSS file.

                                     

                                    Greet,

                                     

                                    Willam

                                    • 16. Re: Fonts not visible on everyone else's workstation
                                      BonnieM Level 1

                                      Oh, the party rages on.

                                       

                                      It seemed to have worked, but it didn't. I just asked someone else in the company to pull up the help files from the most recent build and the fonts were still broken.

                                       

                                      I opened up RH and found this in default.css:

                                       

                                      pm-05.png

                                      If RH changes what I typed in, that means it's unhappy with the syntax.

                                       

                                      The quotation marks are missing from the filenames, and now all of the "srcs" are in quotation marks.

                                       

                                      The font files are in the same folder as the CSS, so that's not the problem. The font files also made it into the output files, same folder.

                                       

                                      So what's the correct syntax for RH? It doesn't seem to conform to CSS3: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

                                       

                                      UPDATED: src should occur just once. I had put it before each url.

                                      • 17. Re: Fonts not visible on everyone else's workstation
                                        Willam van Weelden Adobe Community Professional & MVP

                                        RH somtimes messes up CSS it doesn't understand. Try specifying only a single font file. Normally you would only need multiple font files for different font types (ttf, otf, etc.)

                                         

                                        Why are you suppying multiple fonts?

                                         

                                        Greet,

                                         

                                        Willam

                                        • 18. Re: Fonts not visible on everyone else's workstation
                                          BonnieM Level 1

                                          I'm supplying multiple fonts because I don't know what the Sam Hill I'm doing.

                                           

                                          Arial Narrow, Arial Narrow Bold, Arial Narrow Bold Italic, and Arial Narrow Italic.

                                           

                                          Can I just use a B and/or I tag instead of Arial Narrow Bold/Italic? If so, why do the different font files even exist?

                                           

                                          Fonts really suck sometimes.

                                          • 19. Re: Fonts not visible on everyone else's workstation
                                            Willam van Weelden Adobe Community Professional & MVP

                                            Ah, there's a trick to this as well. You must make a font-face rule for every style: regular, bold, etc.

                                             

                                            This answer outlines what you need to do: stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face

                                             

                                            With these rules in place, use the CSS attribute font-weight: bold; to make a font bold and use font-style: italic; to make it italic. Use both to make both bold and italic. (Or use the RH B/I buttons, but I would not recommend that as that uses inline styling.)

                                             

                                            Greet,

                                             

                                            Willam

                                            • 20. Re: Fonts not visible on everyone else's workstation
                                              Captiv8r Adobe Community Professional & MVP

                                              Just a bit of a sojourn here. Maybe it will take your mind off the problems a tad.

                                               

                                              Well worth the watch for anyone dealing with fonts. LOL

                                               

                                              http://www.collegehumor.com/video/3505939/font-conference

                                               

                                              Cheers... Rick

                                              • 21. Re: Fonts not visible on everyone else's workstation
                                                BonnieM Level 1

                                                OK. Fonts still not showing up on other people's machines.

                                                 

                                                Here's the default CSS:

                                                 

                                                @font-face {

                                                    font-family: "Arial Narrow";

                                                    src: url('ARIALN.TTF'), url('arialn.eot');

                                                };

                                                @font-face {

                                                    font-family: "League Gothic";

                                                    src: url('LeagueGothic-Regular.otf'), url('LeagueGothic-Regular.eot');

                                                };

                                                 

                                                All four of those mentioned font files are in the output folder, same folder as default.css.

                                                 

                                                What is wrong?

                                                 

                                                Also, thanks for the College Humor vid. I saw that ages ago, but it's worth seeing again.

                                                 

                                                UPDATE: I ran it by our GUI guys and they sent back what they're using for the UI:

                                                 

                                                @font-face {

                                                    font-family: "icons";

                                                    font-style: normal;

                                                    font-weight: normal;

                                                    src: url("/css/fonts/icons-font.eot?#iefix") format("embedded-opentype"), url("/css/fonts/icons-font.woff?cachebuster=12") format("woff"), url("/css/fonts/icons-font.ttf?cachebuster=12") format("truetype"), url("/css/fonts/icons-font.svg?cachebuster=12#icons") format("svg");

                                                }

                                                 

                                                "Not very cross-browser friendly" was how he described my definitions, and he also pointed out that I've got semicolons after the closing curly quote.

                                                 

                                                So.

                                                 

                                                Work to do.

                                                 

                                                UPDATE II: I found this resource

                                                 

                                                http://convertfonts.com/

                                                 

                                                Upload a font file from your desktop and get back a ZIP with all file types (eot, woff, ttf, svg) plus a CSS that has the definitions written out for you, e.g.,

                                                 

                                                @font-face {

                                                    font-family: 'ArialNarrow';

                                                    src: url('arialn.eot');

                                                    src: url('arialn.eot') format('embedded-opentype'),

                                                         url('arialn.woff') format('woff'),

                                                         url('arialn.ttf') format('truetype'),

                                                         url('arialn.svg#ArialNarrow') format('svg');

                                                }

                                                 

                                                I'm making sure my font names in the CSS conform exactly to the @font-face definition.

                                                 

                                                Then I'm adding all of the font files to the baggage files.

                                                 

                                                And crossing my fingers…

                                                • 22. Re: Fonts not visible on everyone else's workstation
                                                  BonnieM Level 1

                                                  How sick is this ('sick'  meaning 'twisted'): the fonts work in all browsers but Firefox.

                                                   

                                                  That's both when I launch the browser and open [project].htm directly from the output files and when using the RH preview's View with feature. Yes, I've enabled the Firefox option to let web pages choose their own fonts, and I've cleared the cache, etc.

                                                   

                                                  What I HAVE accomplished is to force Firefox to NOT look at my system font files. I guess that's progress. Everything is in Times New Roman, with the right colors and sizes.

                                                   

                                                  Curses!

                                                  • 23. Re: Fonts not visible on everyone else's workstation
                                                    Willam van Weelden Adobe Community Professional & MVP

                                                    Hmm, it seems that this is a firefox security policy when files are stored on a local disk (stackoverflow.com/questions/285502/css-font-face-not-working-with-firefox-but-working-wi th-chrome-and-ie)

                                                     

                                                    What happens if you put the output on a web server?

                                                     

                                                    Greet,

                                                     

                                                    Willam

                                                    • 24. Re: Fonts not visible on everyone else's workstation
                                                      BonnieM Level 1

                                                      At this late date, putting the files on a web server is not an option: they need to be rolled into the build. Furthermore, the help files are for a LAN security product, so sometimes the machines won't have access to the internet by design.

                                                       

                                                      Also, your link keeps redirectingme to the wrong page:  http://stackoverflow.com/questions/285502/jquery-safari-chrome-incompatibility-with-dragga ble-containment-property

                                                       

                                                      I found the real one: http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-work ing-with-chrome-and-ie

                                                       

                                                      One of our GUI guys noticed that my definitions were missing double-quotes and commas at the end of the lines, and when he loaded the new CSS into his browser it worked. I also changed about:config on my own browser so that the right fonts will show up for me when I view the generated files from my local drive.

                                                       

                                                      He says that the files that are loaded in with the build should show up OK on other people's Firefox.

                                                       

                                                      ERGO, double quotes all around and commas at the end of lines.

                                                       

                                                      @font-face {
                                                      font-family: "Arial Narrow";
                                                      src: url("arialn.eot");
                                                      src: url("arialn.eot#iefix") format("embedded-opentype"),
                                                      url("arialn.woff") format("woff"),
                                                      url("arialn.ttf") format("truetype"),
                                                        url("arialn.svg#ArialNarrow") format("svg");
                                                      }
                                                      @font-face {
                                                      font-family: "League Gothic";
                                                      src: url("LeagueGothic-Regular.eot");
                                                      src: url("LeagueGothic-Regular.eot#iefix") format("embedded-opentype"),
                                                        url("leaguegothic-regular.woff") format("woff"),
                                                        url("leaguegothic-regular.ttf") format("truetype"),
                                                        url("LeagueGothic-Regular.otf") format("opentype"),
                                                      url("leaguegothic-regular.svg#LeagueGothicRegular") format("svg");
                                                      }
                                                      @font-face {
                                                      font-family: Arial;
                                                      src: url("arial.eot");
                                                      src: url("arial.eot#iefix") format("embedded-opentype"),
                                                      url("arial.woff") format("woff"),
                                                      url("arial.ttf") format("truetype"),
                                                        url("arial.svg#ArialRegular") format("svg");
                                                      }
                                                      @font-face {
                                                      font-family: "Courier New";
                                                      src: url("cour.eot");
                                                      src: url("cour.eot#iefix") format("embedded-opentype"),
                                                      url("cour.woff") format("woff"),
                                                      url("cour.ttf") format("truetype"),
                                                        url("cour.svg#CourierNewRegular") format("svg");
                                                      }

                                                      • 25. Re: Fonts not visible on everyone else's workstation
                                                        BonnieM Level 1

                                                        Update: RoboHelp will strip out the commas and double-quotes from the @font-face definitions in default.css but not in any other CSSs.

                                                         

                                                        I've created a copy of defalt.css and assigned it to all my master pages where default.css used to be. The new CSS keeps the formatting post-generation.

                                                         

                                                        However, Firefox is still being stubborn, even after I edited about:config and even with the new CSS.

                                                         

                                                        I am beginning to suspect that RoboHelp doesn't actually support @font-face, given that it's not in the documentation.