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.
Font family trouble in skins
Re: Font family trouble in skins
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.
...
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.
...
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 ;.
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 ;.
Re: Font family trouble in skins
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?
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.
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?
What type of skin are you using - Tripane, or Top Nav / Side Nav?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.
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.
Re: Font family trouble in skins
Thanks for the help everyone.
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.
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?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.
Do I just drop the font files into Content/Resources?1) Adding the font files into the Content/Resources directories (OTFs, EOTs, WOFFs - whichever font was appropriate for each browser type)
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.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
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.
So I should put something like this into the master stylesheet file?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'); }
Thanks, I'll try this last if your other solutions don't work.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.
Yes, this is exactly the sort of thing I was looking for with this question. Thanks!#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 ;.
I'm using a Top Nav skin.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.
Re: Font family trouble in skins
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?
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?
Re: Font family trouble in skins
Hi, did you end up finding a fix for this? I've run into the exact same issue!