RoboHelp substitutes alien fonts during PDF generation

Participant ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

Hi y'all,

I'm having a problem with RoboHelp 2020.4.173 on Windows10 not creating PDFs using the fonts I specify.

Our company-approved font face is Proxima Nova, which I have installed and which appears correctly in every other application. InDesign, for instance, creates beautiful PDFs using that font. Windows tells me it's "installable" which, I understand, also means embeddable.

In RoboHelp, I've added Proxima Nova to the File > Project Settings > Font List. It's also littered throughout my CSS, starting with
body {
font-family: "Proxima Nova";
font-size: 9.5pt;
}

as well as for elements such as H1, H2, etc.

I made sure to set the PDF preset's Advanced tab > Embed used fonts to ENABLED.

When RoboHelp generates the PDF, it replaces Proxima Nova (a sans serif font) with Adobe Sans MM (sans serif) or Tinos (serif), though there seems to be no rhyme or reason. Sometimes it switches between the two in the middle of a sentence! Neither of these fonts is mentioned or specified in any of my projects or CSS files. In fact, I don't even have them installed (Windows\Fonts directory does not list either of them).

If I DISABLE Embed used fonts, then the PDF contains Tinos but not Adobe Sans MM (interestingly, Courier New shows up properly either way).

If I add an alternate font to the CSS, like so:

body {
font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
font-size: 9.5pt;
}

the PDF gets created with Arial. So RoboHelp doesn't want to play with Proxima Nova, though InDesign (and other apps) do just fine.

Any ideas how to get past this?

Views

729

Likes

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

Adobe Community Professional , May 12, 2021 May 12, 2021
There's an extra semi-colon in the import statement. Delete the first one (inside the parentheses). Then try generating again.

Likes

Translate

Translate
Adobe Community Professional ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

Does your font behave correctly if you create HTML5 output?

Likes

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
Participant ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

Thanks for the reply. We use a different font for HTML output, and it does use the proper fonts for that.

Likes

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
Adobe Community Professional ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

Try looking at the code of a topic where this happens. Anything unusual there? 

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

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
Participant ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

Nothing unusual that I can spot. It does it to ALL topics in the project!

I also have a template project with one topic (the project I sent to you earlier in the week, Peter), and the PDF output for that behaves the same way.

Likes

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
Adobe Community Professional ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

Not for real - I meant as a test - just to see that the output will actually embed that font & use it.

Likes

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
Participant ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

Ah! Yes. Yes, it does use Proxima Nova in the HTML output:

Screenshot 2021-05-07 131619.jpg

 

Likes

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
Adobe Community Professional ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

I think there are two things at play here.

  1. If you open the default.css that you use for the PDF output in the CSS editor, you will see it only opens in source view with a message the CSS cannot be parsed. In other words it does not comply with CSS3 standards.
  2. In your topic you have lots of DIVs. I suspect something there is causing an issue as I created a simple topic with a simple CSS and Proxima Nova came through just fine.

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

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
Participant ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

AHHH! Thank you, Peter. I'll test that out also and ask our UX designer to simplify the CSS for us (which might work better for other reasons). 

Likes

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
Adobe Employee ,
May 08, 2021 May 08, 2021

Copy link to clipboard

Copied

"Windows tells me it's "installable" which, I understand, also means embeddable."

 

Not exactly. Embeddable fonts may be stored in a document (e.g., a PDF). When a document with embedded fonts is opened on a system that does not have the font installed (the remote system), the embedded font may be temporarily loaded use on that system by an embedding-aware application (e.g., Acrobat). Embedding licensing rights are granted by the designer/vendor of the font. The embedding flag does not allow the installation of the font on the target (displaying) system.

 

Fonts with an Embedding Licensing Right set to "installable" indicate that they may be embedded and permanently installed on the remote system by an application. The user of the remote system acquires the identical rights, obligations, and licenses for that font as the original purchaser of the font, and is subject to the same end-user license agreement, copyright, design patent, and/or trademark as was the original purchaser.

 

Likes

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
Participant ,
May 11, 2021 May 11, 2021

Copy link to clipboard

Copied

Thanks for that interesting and helpful explanation, Stefan!

I've spent a couple days redesigning the CSS to eliminate as many DIVs as possible so that the tables and lists are just straight classes, nothing fancy. Though the CSS is definitely easier to work with (and apply styles using the WYSIWYG editor in RoboHelp), it hasn't fixed the alien font issue in the PDFs.

The problem with changing fonts in the middle of a sentence remains:

Screenshot 2021-05-11 120858.jpg

Likes

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
Adobe Community Professional ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

I think it has to be something to do with whatever divs remain as without them the problem goes away.

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

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
Participant ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

Actually, I created a barebones CSS that contains 0 divs, 0 spans, and only defines the body, H1-H4, and P tags to use the Proxima Nova font. Still, the PDF will NOT generate with that font, but the Frameless HTML does. The PDF only got the correct font size. I still don't know where Tinos came from, since that's not installed on my computer. 😕

 
/* barebones CSS */
body {
  font-family: "Proxima Nova";
  font-size: 9.5pt;
}

h1 {
  font-family: "Proxima Nova";
}
h2 {
  font-family: "Proxima Nova";
}
h3 {
  font-family: "Proxima Nova";
}
h4 {
  font-family: "Proxima Nova";
}
h5 {
  font-family: "Proxima Nova";
}
p {
  font-family: "Proxima Nova";
}
Screenshot 2021-05-12 074352.jpg

Likes

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
Adobe Community Professional ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

I thought that when I tried this in a topic with no divs and a simplified CSS, then it worked. Are you trying the same or with topics that have divs.

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

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
Participant ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

I appreciate your help for this perplexing issue! Trying to get to the root of the problem, here's what I did:

  1. Started a new project not based on any template -- a pristine project.
  2. Used only RoboHelp's UI to set the P and H1 font family to Proxima Nova Rg, picking it from the selection list.
  3. Verified the change was made in the default.css (looking at it in VS Code)
  4. Ensured the master page uses the default.css.
  5. Built the PDF.

The First Topic ended up with Adobe Sans MM font, not Proxima Nova.

/*Created with Adobe RoboHelp.*/
body {
  font-family: "Proxima Nova Rg";
  font-size: 14px;
}
h1 {
  font-weight: bold;
  font-size: 32px;
  font-family: 'Proxima Nova Rg';
}
h2 {
  font-weight: bold;
  font-size: 24px;
}
h3 {
  font-weight: bold;
  font-size: 19px;
}
h4 {
  font-weight: bold;
  font-size: 16px;
}
h5 {
  font-weight: bold;
  font-size: 13px;
}
h6 {
  font-weight: bold;
  font-size: 11px;
}
p {
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Proxima Nova Rg';
}
Screenshot 2021-05-12 080624.jpg
 
Out of curiosity (and to be thorough), I even changed the font family to "Proxima Nova" in the CSS and tried running the PDF generation again. While the font appearance in the UI changed to look correct (it did not look right in the RH UI using the Proxima Nova Rg selected from the drop-down), PDF generation still substitutes an undesired font.

Likes

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
Participant ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

BTW, if I choose to Embed used fonts, the PDF contains Tinos rather than Adobe Sans MM. Go figure!

Likes

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
Adobe Community Professional ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

OK, let me have this simple project to look at.

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

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
Participant ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

Sent via the wetransfer. Thank you, Peter!

Likes

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
Adobe Employee ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

Can you please try the following:

1. Close all topics and open the default.css of your project. Switch to the code view of the CSS editor.

2. Add the following as the first line before any other CSS declaration (can be after the first comment lines):

@import url("https://use.typekit.net/rsl6dbo.css";);

3. Change your body definition from your current:

 

body {
  font-family: "Proxima Nova";
  font-size: 9.5pt;
}

 

to this:

body {
  font-family: proxima-nova;
  font-size: 9.5pt;
}

 

4. Change other font-family occurrences accordingly.

5. Save the CSS, re-open a topic, and save the topic as a PDF.

6. Let us know the result.

 

Likes

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
Participant ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

Hi Stefan,

Thanks for the help! I followed the steps you listed using my "pristine" new project.

When I generate the PDF, I get the same incorrect fonts: Tinos if I use Embed used fonts, or Adobe Sans MM if I don't.

When I reopen the updated default.css file, RoboHelp gives me an error: Failed to parse the stylesheet. Was that supposed to happen?

 

/*Created with Adobe RoboHelp.*/
@Import url("https://use.typekit.net/rsl6dbo.css";);
body {
font-family: proxima-nova;
font-size: 9.5 pt;
}
h1 {
font-weight: bold;
font-size: 32px;
font-family: proxima-nova;
}

...

p {
margin-top: 5px;
margin-bottom: 5px;
font-family: proxima-nova;
}

Likes

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
Adobe Community Professional ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

There's an extra semi-colon in the import statement. Delete the first one (inside the parentheses).

 

Then try generating again.

Likes

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
Adobe Employee ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

Good catch, @Amebr! Not sure how this ";" slipped in there.

Likes

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
Adobe Community Professional ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

@Stefan-Gentz I used to watch Dad debug the code he typed out of the Apple magazine for games back in the 80s. The little suckers slip in all over the place 😛

Likes

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
Participant ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

LATEST

Yes! Or you forget one that's needed, and you can't understand why your code doesn't work. LOL

Likes

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
Participant ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

AH HA!! Thank you @Amebr!

The good news is that the body text came out great -- it's Proxima Nova Rg, as desired! HURRAY!!

Screenshot 2021-05-13 073429.jpg

 

The bad news is that the H1 text still shows Adobe Sans MM.

Screenshot 2021-05-13 073211.jpg

/*Created with Adobe RoboHelp.*/
@import url("https://use.typekit.net/rsl6dbo.css");
body {
font-family: proxima-nova;
font-size: 9.5 pt;
}
h1 {
font-weight: bold;
font-size: 32px;
font-family: proxima-nova;
}

 

But it's closer! 🙂 Any ideas for how to fix the H1?

Likes

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