Fonts not visible on everyone else's workstation

[BonnieM]

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!

[Willam_van_Weelden]

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

[BonnieM]

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.

[Captiv8r]

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

[Captiv8r]

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

[Jeff_Coatsworth]

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

[BonnieM]

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.

[Captiv8r]

[BonnieM]

Alas:

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

Also:

I love it when this kinda thing happens.

[Captiv8r]

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

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

[BonnieM]

YES! There it is!

The fonts are listed as baggage files.

So I generated the content again and…

…no dice.

Behold the font files and the default.css.

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

[BonnieM]

Firebug shows this:

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

[BonnieM]

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

[Willam_van_Weelden]

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

[BonnieM]

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:

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.

[Willam_van_Weelden]

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

[BonnieM]

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.

[Willam_van_Weelden]

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

[Captiv8r]

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

[BonnieM]

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…

[BonnieM]

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!

[Willam_van_Weelden]

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-with-chrome-and-ie)

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

Greet,

Willam

[BonnieM]

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-draggable-contai...

I found the real one: http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-c...

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");
}

[BonnieM]

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.

[BonnieM]

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?