3

I am trying to generate pdf files using a MadCap Flare project, but the PDF files come out with the wrong font. I am using the latest version of Flare, 2019r2.

I am trying to generate paragraphs using the Flexo fonts from Duotype. All the fonts are installed in the main Windows font directory: C:\Windows\Fonts\DUROTYPE_-_FLEXO-REGULAR_1.OTF. This was accomplished by right clicking on the font and choosing "Install for all users".

An example of the issue is the h2 style. The stylesheet has the following declarations in the default section:

body
{
    padding: 0 20px;
}
...

body,
div,
li,
p
{
    color: #3b4151;
    font-family: FlexoRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1em;
    font-weight: normal;
    margin: 0.5em 0;
    mc-hyphenate: never;
    orphans: 2;
    widows: 2;
}
...
h2
{
    color: #f8193f;
    font-family: FlexoBoldIt, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 1.67em;
    page-break-after: avoid;
}

The selector I actually want to use is under a @media section with the following declarations.

body
{
    padding: 0;
    position: relative;
    margin: 0;
}

h2
{
    color: #f8193f;
    font-family: "Flexo-BoldIt", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 9pt;
    margin-bottom: 0px;
    margin: 0px;
    margin-top: 6px;
}

When I define the font-familiy as "font-family: "Flexo", Arial, "Helvetica Neue", Helvetica, sans-serif;" I get output with the Flexo font. However, when I try "Flexo-BoldIt" or 'Flexo-BoldIt' or "Flexo Bold Italic" or various other combinations of quotes and font names I get output with Microsoft Sans Serif. When I try to override the style with an explicit declaration such as 

<h2 style="text-align: center;font-family: "Flexo-BoldIt"...">

the output is again in MS Sans Serif.

Adding declarations like

font-style: italic;
font-weight: bold;

doesn't help.

Why doesn't Flare generate output with the correct font? Also, why doesn't it generate output with Arial, as that is installed? If I remove "Flexo-BoldIt" from the font-family I get output with Arial.

Any help would be much appreciated.

Aharon Manne
  • 712
  • 3
  • 11
  • 34

3 Answers3

0

Have you added font-face in CSS

@font-face
{
   font-family: 'YourFontFamilyName';
   src: url(../path/to/font);
}

After that use font like

h1
{
   font-family: 'YourFontFamilyName';
}

Also, keep your fonts in project files so you can access it with a relative path easily.

Try this out and give me feedback :)

UPDATE

This is more of a tip for every project similar to this one.

Do not use the system installed fonts because if the user doesn't have that font installed on their system it will be wrong. Always put font files in a project directory and access them like above.

Mileta Dulovic
  • 1,036
  • 1
  • 14
  • 33
  • 1
    Thanks for taking a look, but Madcap tech support says: "The @font-face declaration is specific to HTML5 output." I am looking for a solution for PDF output from MadCap Flare. – Aharon Manne Dec 03 '19 at 15:22
  • This really helped me – "Install for all users": https://www.madcapsoftware.com/blog/installing-fonts-for-use/ – Tubbe Mar 24 '23 at 09:08
0

Convert the font file into base64

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
    font-weight: normal;
    font-style: normal;
}
Shirish Maharjan
  • 502
  • 3
  • 17
  • 1
    Thanks for taking a look, but Madcap tech support says: "The @font-face declaration is specific to HTML5 output." I am looking for a solution for PDF output from MadCap Flare. – Aharon Manne Dec 09 '19 at 07:49
0

Try this, from https://www.madcapsoftware.com/blog/madcap-flare-tip-use-custom-fonts-flare-outputs/:

The @font-face rule can have “font-family” defined as any name. However, I recommend using the default name seen in Flare. You can find out what name Flare is reading the font by going to the Home Ribbon and selecting the Font dropdown. The reason I recommend this is because if the font name is different than what appears in the dropdown, the PDF outputs will have to point to a different font name than your HTML5 outputs.

The name you show in the example looks like the name on the filesystem, not necessarily what the name appears as in the ribbon.

stmpjmpr
  • 131
  • 7
  • Thanks for the suggestion. Tried it, but no joy. Again, I am trying to get the PDF files to use the correct file, and according to MadCap support the @font-face rule is relevant to HTML output, not PDF. – Aharon Manne Dec 09 '19 at 06:52
  • 1
    Understood. The point is that if you're doing both, the @font-face rule CAN negatively affect your PDF rendering. – stmpjmpr Dec 09 '19 at 20:13