Custom Fonts for PDF output

ruthhoward · Post by **ruthhoward** » Fri Oct 03, 2014 1:24 am

I'm in the process of rebranding and our new parent company has a set of custom fonts for us to use. I'm adding this to my CSS but storing font files in the project and referencing them (the font files are in a subfolder 'Fonts' next to the CSS):

Code: Select all

@font-face {
  font-family: 'custom_bold';
  src: url('fonts/custom_bold-webfont.otf') format('opentype'), url('fonts/custom_bold.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

(note I've only got OTF and TTF for this font but I have the full set with EOT, WOFF, and SVG for others)

then I'm initially just trying to apply this to the cover page where I have the style controlled by a paragraph class:

Code: Select all

p.TitleDocType
{
	font-family: 'custom_bold', Arial, sans-serif;
	font-size: 32pt;
	color: #595b60;
	margin-top:22px;
	margin-bottom: 0px;
	margin-right: 45pt;
	text-align: right;
	text-transform: uppercase;
	line-height: 34pt;
}

and in the source HTML file:

Code: Select all

<p class="TitleDocType"><MadCap:variable name="ProductVariables.TitleDocType" /></p>

the thing is that no matter what I do, this consistently shows up as Arial:

custom_font_broken.png

I want it to look like this with the custom font:

custom_font_correct.PNG

I've done a LOT of googling and reading about custom fonts in CSS and this ought to work (I've got it working in webhelp in a separate case). Has anyone managed to do this? any idea what's going wrong or what I need to do to make it work?

Thanks
Ruth

msander · Post by **msander** » Fri Oct 03, 2014 2:28 am

Hi Ruth,

Try this:

Code: Select all

@font-face {
  font-family: custom_bold;
  src: url(fonts/custom_bold-webfont.otf) format(opentype), url(fonts/custom_bold.ttf) format(truetype);
  font-weight: 900;
  font-style: normal;
}

Mattias

ruthhoward · Post by **ruthhoward** » Fri Oct 03, 2014 3:16 am

why is it working for you and not me?

Code: Select all

@font-face {
  font-family: custom_bold;
  src: url(fonts/custom_bold-webfont.otf) format(opentype), url(fonts/custom_bold.ttf) format(truetype);
  font-weight: 900;
  font-style: normal;
}

there's got to be something simple stopping it!

ruthhoward · Post by **ruthhoward** » Fri Oct 03, 2014 3:26 am

the original font set is on a HTTP (that I can access) so I've tried linking to that directly in the header and still no luck. I've tried embedding the font and the style in the header <style> but still not working. also applying the font-family directly to the <p> doesn't work. at a total loss!

msander · Post by **msander** » Fri Oct 03, 2014 3:29 am

Also try removing the single quotes from the CSS for p.TitleDocType

Code: Select all

p.TitleDocType
{
   font-family: custom_bold, Arial, sans-serif;
   font-size: 32pt;
   color: #595b60;
   margin-top:22px;
   margin-bottom: 0px;
   margin-right: 45pt;
   text-align: right;
   text-transform: uppercase;
   line-height: 34pt;
}

ruthhoward · Post by **ruthhoward** » Fri Oct 03, 2014 3:31 am

yup, did that when removing all the other single quotes

Post by **NorthEast** » Fri Oct 03, 2014 4:07 am

I've used font-face for help outputs (HTML5, WebHelp), but I'm not sure it actually works for PDF output - or at least I've never found a way to get it working.

I had to install the font (TTF) in Windows, before I could get it to be included in a PDF.

ruthhoward · Post by **ruthhoward** » Fri Oct 03, 2014 4:09 am

I've narrowed it down to the TTF in the @font-face. It works when I'm linking to the HTTP URL but fails locally. So probably I need to install it on my machine. That's gonna be a pain as we'll need to install it on all build machines too. ah well, may have a resolution at least.

Post by **NorthEast** » Fri Oct 03, 2014 5:14 am

ruthhoward wrote:It works when I'm linking to the HTTP URL but fails locally.

Are you saying it works for the PDF target, or do you mean a help target?

I can get font-face working fine with WebHelp/HTML5 targets, where the fonts are either local (a relative path) or external (http path).
However, I've never yet managed to get font-face working for a PDF target, regardless of the type of font file, or whether it's local or online.

ruthhoward · Post by **ruthhoward** » Fri Oct 03, 2014 5:19 am

ah yes, total fail after lots of work. It works for the source file open in a browser but not in Flare and not in output

major issues

all the content on the sourceforge, CSS, etc make it seem like this really really ought to work but it just doesn't. I don't know if there's something funky with my specific font files or if I'm missing something supporting.

Installing the fonts on my machine didn't help at all either.

Post by **NorthEast** » Fri Oct 03, 2014 5:58 am

In my projects, the font (TTF) that I install in windows has different name to the one that I use in the font-face CSS.

For example, the installed font name (what Windows calls it) might be MyFont, but I set the font-face name as MyFontWeb; then when I set the fonts, I'd use font-family: MyFont, MyFontWeb, ...;

That means the local installed file will be used (if available) when I build the PDF target. For the help outputs, if the reader doesn't have 'MyFont' installed, then they will get the font-face typeface 'MyFontWeb'.

ruthhoward · Post by **ruthhoward** » Fri Oct 03, 2014 6:01 am

is the installed font name equivalent to the TTF filename? if not how do I find it out? I tried changing the font-face name to match the TTF filename and that didn't help so I'm not sure your suggestion will improve things. will try later, need to stop faffing about with this and do some actual product work

Post by **NorthEast** » Fri Oct 03, 2014 6:03 am

To find out the font name, just click the Font list in Flare (or Word, or anything with fonts).

ruthhoward · Post by **ruthhoward** » Fri Oct 03, 2014 6:17 am

Dave, thank you so much (couldn't resist the lure of a possible fix, product work be darned) I've installed all the fonts and now (crucially!) restarted Flare so that they appear in the Fonts list and BINGO!

I updated the font-family on the classes in the CSS to match the Font list names rather than the @font-face names and now the HTML content is listening nicely and the PDFs are even generating with the right fonts.

Thank you so so much!
Ruth

Post by **NorthEast** » Fri Oct 03, 2014 6:36 am

ruthhoward wrote:I updated the font-family on the classes in the CSS to match the Font list names rather than the @font-face names

Just to be clear, set the font-family to use both names, i.e. the name of the installed font (as it appears in the font list), followed by the name that you've set for the font-face CSS.

You have the font installed on your PC, so it'll mean the installed font is always used first - whether that's a PDF or help output. But for anyone who doesn't have the font installed, it'll pick the second font in the list - i.e. the font you've defined using font-face.

ruthhoward · Post by **ruthhoward** » Fri Oct 03, 2014 6:39 am

ah ok, I see what you mean. Done.

ruthhoward · Post by **ruthhoward** » Mon Oct 06, 2014 8:35 am

You were right Dave, it doesn't work for HTML outputs. The WYSIWYG looks good but preview/compiled pages are terrible (doesn't even use backup font but Times!).

I've entered a support call #67075 to see if I'm being too ambitious.

ruthhoward · Post by **ruthhoward** » Mon Oct 06, 2014 8:37 am

Dave Lee wrote:I can get font-face working fine with WebHelp/HTML5 targets, where the fonts are either local (a relative path) or external (http path).
However, I've never yet managed to get font-face working for a PDF target, regardless of the type of font file, or whether it's local or online.

wait what? how? I'm the other way round. PDF looks lovely but HTML disaster. oh dear this is getting confusing.

Post by **NorthEast** » Mon Oct 06, 2014 9:05 am

In my case I'm using the Foco font.
I've installed the TTF in Windows, and it's name appears in the font list as 'Foco'.

In my CSS, I use the different name 'FocoRegular' for the web font using @font-face, as I need to distinguish between them; so my CSS looks like:

Code: Select all

@font-face 
{
	font-family: 'FocoRegular';
	src: url('../fonts/foco-webfont.eot');
	src: url('../fonts/foco-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/foco-webfont.woff') format('woff'), url('../fonts/foco-webfont.ttf') format('truetype'), url('../fonts/foco-webfont.svg#FocoRegular') format('svg');
}

h1
{
	font-family: Foco, FocoRegular, Arial, Helvetica, sans-serif;
}

For the PDF target, the font Foco is used and embedded in the PDF. Note that will only work if I have a font called 'Foco' installed on my PC, otherwise I'll get Arial in my PDF.

For the help (HTML5) target, the browser will first try and use a font called 'Foco'. Now, I have 'Foco' installed, so I will see that. However, if someone else views the help that doesn't have 'Foco' installed locally, it will use 'FocoRegular' which is the web font name I defined using @font-face.

ruthhoward · Post by **ruthhoward** » Tue Oct 07, 2014 2:05 am

I've got the TTF installed to and distinct install (3ds) and @font-face (3dsRegular) names:

Code: Select all

@font-face {
  font-family: '3dsRegular';
  src: url('Fonts/3ds_regular-webfont.eot');
  src: url('Fonts/3ds_regular-webfont.eot?#iefix') format('embedded-opentype'), url('Fonts/3ds_regular-webfont.woff') format('woff'), url('http://www.url_to_webfonts.com/3ds_regular-webfont.svg#3dsregular') format('svg');
  src: url('Fonts/3ds_regular-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

http://www.url_to_webfonts.com is made up and the SVG isn't actually there at the URL - could this be the root of the issue?

then

Code: Select all

body
{
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 0px;
	padding-top: 0px;
	font-size: 11pt;
	background: #ffffff;
	color: #000000;
	line-height: 1.1em;
	font-family: 3ds, 3dsRegular, Calibri, Arial, Sans-Serif;
}

but this isn't using either 3ds (installed) or 3dsRegular (@font-face) for web help (works for PDF) although the WYSIWYG looks good:

fonts_XMLview.PNG

but in preview or compiled HTML5 its not even using Calibri or Arial but looks like Times.

fonts_preview.PNG

Post by **NorthEast** » Tue Oct 07, 2014 3:14 am

ruthhoward wrote:I've got the TTF installed to and distinct install (3ds) and @font-face (3dsRegular) names:

Code: Select all

  src: url('Fonts/3ds_regular-webfont.eot');
  src: url('Fonts/3ds_regular-webfont.eot?#iefix') format('embedded-opentype'), url('Fonts/3ds_regular-webfont.woff') format('woff'), url('http://www.url_to_webfonts.com/3ds_regular-webfont.svg#3dsregular') format('svg');
  src: url('Fonts/3ds_regular-webfont.ttf') format('truetype');

The code looks incorrect; you have a third src pointing to the ttf file, so that will be used in preference to the src that comes before it.
You need to include the TTF in the second src statement.

Also, I wouldn't bother including a bad link to the the SVG, it's not going to help anyone.

Try:

Code: Select all

  src: url('Fonts/3ds_regular-webfont.eot');
  src: url('Fonts/3ds_regular-webfont.eot?#iefix') format('embedded-opentype'), url('Fonts/3ds_regular-webfont.woff') format('woff'), url('Fonts/3ds_regular-webfont.ttf') format('truetype');

That's the common way to use font-face for cross-browser support. I'd suggest reading and following the guideline here (the first method):
http://css-tricks.com/snippets/css/using-font-face/

ruthhoward · Post by **ruthhoward** » Tue Oct 07, 2014 3:31 am

I think that I moved the TTF into a new SRC definition because that was what made something else work somewhere. If I undo that to make the @font-face this:

Code: Select all

@font-face {
  font-family: '3dsRegular';
  src: url('Fonts/3ds_regular-webfont.eot');
  src: url('Fonts/3ds_regular-webfont.eot?#iefix') format('embedded-opentype'), url('Fonts/3ds_regular-webfont.woff') format('woff'), url('Fonts/3ds_regular-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

(and the same for all font definitions)

everything still looks the same as my previous images - works in WYSIWYG and PDF but not in preview/compiled.#

I'm sure there's something really simple wrong and I just can't see the wood for the trees! I'm down to wondering if some of the font files might be bad. I'm on Flare 10.2.1 by the way.

Here's the really weird thing. If I select a paragraph in my source and specifically style that with a custom font - it works! there must be something wrong with my reference in the CSS back to the style:

font_hardcode.PNG

I've tried adding a body font-family to the masterpage as a head style defintion and as a style on the body element but that doesn't work.

Specifying the font-family on H1 (for example) works marginally better (with no reference from body to my custom fonts) - this ends up with the 2nd back up being used and showing as Calibri. But still no custom font in HTML5 output.

Thanks so much for your help Dave. I read that page while I was struggling last week and it took me a long way - the essential thing that it is missing is for you to install fonts on your machine! that had me stuck for a while for PDF!

Post by **NorthEast** » Tue Oct 07, 2014 4:23 am

I don't know what to suggest - you managed to get it working in your original post, with a different font.

Double-check the src paths and filenames are correct, and in the correct case. Also check the output folder, and ensure the font files are actually in the output - i.e. they're not being excluded by conditions, or the target setting 'Exclude content not linked directly...' .

In order to test whether the font-face font is working or not, create a style that just uses 3dsRegular and not 3ds. You know the locally installed font 3ds is working, so there's no need to test that.

ruthhoward · Post by **ruthhoward** » Tue Oct 07, 2014 6:45 am

Applying font-family: 3dsRegular; to a paragraph alone doesn't work, let alone as a CSS style.... I suppose this means that the CSS isn't referencing the font files properly. Still don't know what's wrong though.

MadCap Software Forums

Custom Fonts for PDF output

Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output

Re: Custom Fonts for PDF output