Font family trouble in skins

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

Font family trouble in skins

Postby QPerch on Wed May 29, 2019 1:44 pm

Hi,

I'm working on an HTML5 output, and I've found that my general skin isn't using my selected font. I'm getting Times New Roman on output instead of my selected font.

For example, if I open my general skin and go to Styles > Top Navigation Menu Item > Font > Family and then set it to the font that I want (Avenir), the proper font is shown in the preview pane, but the header comes out as Times New Roman when I do a build.

Selecting (Sans-Serif) in this same field ALSO results in Times New Roman.
Selecting Arial in this field results in Arial, as it should.

So I have two questions:
1) How do I fix this and make the skin use my selected font?
2) Is there a way to set backup fonts in a skin like you can in a CSS file? I opened the skin file in the text editor, and since it's XML, I'm not sure what syntax Flare wants from me in the appropriate font field. Ideally, I'd want to set something like Avenir > Arial > Sans-Serif.
QPerch
Jr. Propeller Head
 
Posts: 6
Joined: Fri May 24, 2019 12:58 pm

Re: Font family trouble in skins

Postby bunnycat on Fri May 31, 2019 3:59 am

QPerch,

Wow, that is weird behavior! Always Times New Roman is weird!

#1 Can I assume that Avenir is a custom font? I've encountered challenges in the past with custom fonts and HTML5 outputs.

In past, we worked around the font issues by:
1) Adding the font files into the Content/Resources directories (OTFs, EOTs, WOFFs - whichever font was appropriate for each browser type)
2) Installed the fonts to our Flare build machine (this might be redundant with the below steps, but we needed to build PDFs too - and custom fonts need to be installed to be embedded in the PDFs :o
3) We defined the font faces in our style sheets.

Code: Select all
@font-face
{
    font-family: 'MetricLocal_semi';
    font-weight: normal;
    font-style: normal;
    src: url('./fonts/Bold/Metric-Web-Semibold.eot');
    src:         url('./fonts/Bold/Metric-Desktop-Semibold.otf') format('opentype'),
       url('./fonts/Bold/Metric-Web-Semibold.woff') format('woff'),
   url('./fonts/Bold/Metric-App-Semibold.ttf') format('truetype');
}

...
4) Then we hyperlinked to them from some inconspicuous file (like down in the footer of the legal/copyright statement file.) Hyperlinking them inside the copyright file works to embed the fonts in the output.

Code: Select all
<a href="../Stylesheets/fonts/Bold/Metric-Web-Semibold.eot">url('../../fonts/Bold/Metric-Web-Semibold.eot')</a>
...

We marked all of the text blocks containing the font hyperlinks as visibility:hidden so that they wouldn't be seen if you happened to read the copyright file :)

It might be overkill in some respects. We had a ton of different fonts going for all the headings and body text... But this seemed the only way we could force the custom fonts to be shown.

#2) Yes, you can add a list of fonts to the Skin - especially handy if you need to support cross-platform browser compatibility (if we just used a Windows font, our site used Times New Roman on a Mac)

In The Font > Family text box, instead of selecting from the list, I usually add a list: Calibri, Arial, sans-serif; <-- with this exact punctuation, comma-delimited, with a final ;.
bunnycat
Propeller Head
 
Posts: 58
Joined: Tue Nov 03, 2015 6:44 am

Re: Font family trouble in skins

Postby Dave Lee on Fri May 31, 2019 5:56 am

Bunnycat's approach is correct, but I would suggest a couple of things:

Step (2) is only required if you produce PDFs - but if you need this, then do it after (3). Just when you do (3), it'll be easier to test if the font-face definition has worked if you have not already installed the fonts on your PC.

Step (4) shouldn't be necessary. What does this do?

QPerch wrote:I'm working on an HTML5 output, and I've found that my general skin isn't using my selected font. I'm getting Times New Roman on output instead of my selected font.


What type of skin are you using - Tripane, or Top Nav / Side Nav?

Top Nav and Side Nav should work fine, but Tripane will be more complicated since it isn't linked to any of your stylesheets - so it requires some customisation to attach a stylesheet to the skin.
Dave Lee
Master Propellus Maximus
 
Posts: 5662
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Font family trouble in skins

Postby QPerch on Fri May 31, 2019 12:04 pm

Thanks for the help everyone.

bunnycat wrote:#1 Can I assume that Avenir is a custom font? I've encountered challenges in the past with custom fonts and HTML5 outputs.

I think so. I'm inheriting a project from a previous writer who doesn't work here anymore, so I've had to do a lot of detective work. Or is it a truetype font?

1) Adding the font files into the Content/Resources directories (OTFs, EOTs, WOFFs - whichever font was appropriate for each browser type)

Do I just drop the font files into Content/Resources?

2) Installed the fonts to our Flare build machine (this might be redundant with the below steps, but we needed to build PDFs too - and custom fonts need to be installed to be embedded in the PDFs :o

This is one of the weird things. I'm building on my local machine, and the fonts are installed on my machine. So the headings look like they're using the correct font in the preview in Flare, and I can select those fonts from Flare's list of fonts. But when I build the help file and open it in a browser, those same headings come out in Times New Roman.

To answer Dave's question, I am doing both HTML5 and PDF outputs, so this is definitely needed. Strangely enough, the PDF outputs are using Avenir fine. It's just the online output that's giving me grief.

3) We defined the font faces in our style sheets.

Code: Select all
@font-face
{
    font-family: 'MetricLocal_semi';
    font-weight: normal;
    font-style: normal;
    src: url('./fonts/Bold/Metric-Web-Semibold.eot');
    src:         url('./fonts/Bold/Metric-Desktop-Semibold.otf') format('opentype'),
       url('./fonts/Bold/Metric-Web-Semibold.woff') format('woff'),
   url('./fonts/Bold/Metric-App-Semibold.ttf') format('truetype');
}


So I should put something like this into the master stylesheet file?

4) Then we hyperlinked to them from some inconspicuous file (like down in the footer of the legal/copyright statement file.) Hyperlinking them inside the copyright file works to embed the fonts in the output.

Code: Select all
<a href="../Stylesheets/fonts/Bold/Metric-Web-Semibold.eot">url('../../fonts/Bold/Metric-Web-Semibold.eot')</a>
...

We marked all of the text blocks containing the font hyperlinks as visibility:hidden so that they wouldn't be seen if you happened to read the copyright file :)

It might be overkill in some respects. We had a ton of different fonts going for all the headings and body text... But this seemed the only way we could force the custom fonts to be shown.

Thanks, I'll try this last if your other solutions don't work.

#2) Yes, you can add a list of fonts to the Skin - especially handy if you need to support cross-platform browser compatibility (if we just used a Windows font, our site used Times New Roman on a Mac)

In The Font > Family text box, instead of selecting from the list, I usually add a list: Calibri, Arial, sans-serif; <-- with this exact punctuation, comma-delimited, with a final ;.

Yes, this is exactly the sort of thing I was looking for with this question. Thanks!

Dave Lee wrote:What type of skin are you using - Tripane, or Top Nav / Side Nav?

Top Nav and Side Nav should work fine, but Tripane will be more complicated since it isn't linked to any of your stylesheets - so it requires some customisation to attach a stylesheet to the skin.

I'm using a Top Nav skin.
QPerch
Jr. Propeller Head
 
Posts: 6
Joined: Fri May 24, 2019 12:58 pm

Re: Font family trouble in skins

Postby QPerch on Tue Jun 11, 2019 6:58 am

Just an update:

I tried the fixes and unfortunately, they didn't work. To further add to the confusion, I tried making an entirely new project with the default topnav template, tried changing the header font to Sans-Serif, and it still comes out as Times New Roman. Any of the top font family settings in the drop-down list (which have thing like cursive, fantasy, monospace, serif, and sans-serif) all produce Times New Roman.

Is there something wrong with my computer's font settings?
QPerch
Jr. Propeller Head
 
Posts: 6
Joined: Fri May 24, 2019 12:58 pm


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 5 guests