Adding Outside Font to Flare

[bkelly]

Howdy,

I'm trying to create a single word text. No big deal there. The word is VANTAGE, which is our new product line. My problem is that it must be in a specific ugly font my company likes.

I'm trying to import the new ugly font (STAC222N) into Flare, but don't know how. I dug down and found a folder that said Fonts but isn't it. Here's the path:

C:\Program Files\MadCap Software\MadCap Flare 18\Flare.app\Resources\Fonts

I can find Roboto and FreeMono in that folder, which is swell and all, but when neither show up on the font property list (CTRL+SHIFT+B). Neither can my ugly font STAC222N, which I added to the same folder.

I know this is probably a "CSS 101" level topic, but I'm an old dog and the only new trick I've learned lately is how to extend the range of my car alarm fob (put it under your chin. Your skull is an antenna). Can anyone help with this one?

Thanks,
Bill Kelly
Senior Technical Writer
Satake USA

[NorthEast]

How you set up a custom font depends on the Flare targets you're using.

If you produce HTML5 targets, then the font must be provided with your help output or online, so that people viewing it in their browser can see the font. Installing the font locally on your PC will not help for HTML5 targets - you'll see the font working on your PC, but it won't work for anybody else because they don't have the font installed.
Some font providers have online repositories of their fonts (e.g. Google) so you can easily use their fonts in a website, so first check with your font provider if you can set up your font that way.
Otherwise, if you have the actual font files, then you set up the font using CSS @font-face, which basically tells the web browser where to find the font files. The font files can be included with your Flare project output (so they're available locally), or you might link to them online on your own company web server. For this, you'll need to provide web font file formats such as woff, which will work in most modern browsers.
For info on @font-face, see: https://css-tricks.com/snippets/css/usi ... ce-in-css/
In the @font-face CSS, you choose the font-family name. Then when you refer to that font elsewhere in your CSS, just make sure you use that same font-family name.

If you produce PDF targets, then the font needs to be installed in Windows on your own PC. So if you have the font in TTF or OTF format, right-click on the file and select Install for all users (very important to do this and not just Install).
Flare will embed the font in the PDF, so other users do no need to have it installed on their PC.

If you need to provide the font for HTML5 and PDF, then set up for HTML5 / @font-face first. Do not install the font in Windows yet because the browser will use the font on your PC, so you won't be able to test if the @font-face stuff is actually working. Once you get the @font-face stuff working, then you can install the font on your PC to support PDFs.

[Psider]

Also note, if you want to distribute your the font file with your help, using @font-face rather than one of the online repositories, you need to check if your license to the font allows this sort of distribution.

[ChoccieMuffin]

I can be no help with fonts, but I was intrigued by your car alarm fob hack - you know I'm going to have to go outside to try it!