Font family trouble in skins

[QPerch]

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.

[bunnycat]

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
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 ;.

[NorthEast]

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?

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.

[QPerch]

Thanks for the help everyone.

#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

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!

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]

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?

[Rebecca58]

Hi, did you end up finding a fix for this? I've run into the exact same issue!