MadCap Software Forums

I have started work on an existing project that was created by another Technical Author. I wish to make some small changes but during the process have encountered an issue.

I have changed my main font to Calibri. However, this did not cascade as I expected it to, I have therefore changed a number of styles to make it work. Have just got to the last bit and I cannot get the skin to acknowledge my change. No matter what I do the content navigation pane is displaying the links in Times New Roman. The screen shot below shows the navigations pane and the collapsible section where I have changed the font to Calibri. I have built the target but the problem persists.
Can anyone think of anywhere I can change the font to effect a change in the content navigation? I have tried everything I can think of and am exhausted in more ways than one!

I have even tried different fonts to no avail. I used Flare in the past but have not used it for a couple of years, Flare 11 is a new version to me. Maybe I am missing something?

Dee

If I were debugging this here, I'd:
1) open the project and check that the skin it's using is the skin I think it's using.
More than once I've discovered that I was working on the wrong file after an hour of effort.

2) try choosing a family rather than a font. Maybe your browser isn't able to show Calibri for some reason?

3) after building, open the Skins folder and check what's in the CSS files.

4) the HTML5.flskn file (which it looks like you're using) is xml. You could open it in an editor to check that its contents change as expected after you make a change with the Flare UI. Be careful not to damage your xml.

And, on an almost totally unrelated topic, I see a new professional title out there: "CSS dermatologist".

The skin editor lets you select which medium to edit styles for. Are you sure you're editing the right medium (e.g., Web Medium vs. Tablet Medium vs. Mobile Medium)?

Also, check the styling specifically of the Contents tab, given that it looks different in your screencapture than the Index tab.

Thanks for the helpful suggestions. I did originally try the "Open Sans Serif" font family which did not work with any of the text. All of content and navigation appeared in Times New Roman. I changed the body style to Calibri and when building the project it at least put the main content into a sans serif font leaving me with the Navigator pane in Times New Roman which is what you see in the screen shot.

I will check out the HTML file.

The default medium is web. This is the only medium we use now; however, print was used in the past, I will check that I did not accidentally change it when editing. I will also check the Tablet and Mobile medium. It is certainly something I did not think of. Thank you.

Trouble is we are using two different style sheets to cater for internal and customers so I have to take care they work across all of the targets in use.

I will let you know how I get on later today.

Dee

Well I have made a breakthrough. I roamed around checking through your suggestions and noticed that when I went to the font family it was named Sans Serif and not Open Sans which is what was in the project. This project was set up and worked on in the USA and then passed on to me in the UK and it would appear that this font family is not available on my UK system. Spent hours on this and it was the last problem I expected to have. I would have thought font families were pretty universal nowadays but it would seem they are not.

I am going to update the CSS and all skins to Sans Serif. Still at least I have identified the problem!

Many thanks for all your help.

Dee

Bear in mind that for web outputs, the font you select is not 'embedded' in the output (unless you manually supply the font files and use @font-face).

So, whilst it works for you, it will only work for others if they have that font installed too (or rather a font with that particular name).

The usual practice is to set the font-family to multiple fonts, in order of precedence, with specific fonts and a 'generic' font fall-back; e.g. (font-family:) Arial, Helvetica, sans-serif;
http://www.w3schools.com/cssref/pr_font_font-family.asp

Dave Lee wrote:The usual practice is to set the font-family to multiple fonts, in order of precedence, with specific fonts and a 'generic' font fall-back; e.g. (font-family:) Arial, Helvetica, sans-serif;
http://www.w3schools.com/cssref/pr_font_font-family.asp

This is exactly what I was trying to achieve. I do not know how we had "Open Serif" as the font family in the project. Open serif was causing everything to appear in Times New Roman. Using Calibre was an attempt to find out the source of the problem.

I have now changed everything to Sans-Serif which is a generic family name (according to the W3C page you linked to) and suits my purpose. I don't really care what font, as long as it does not have any serifs.

It looks like I will have to go through all the styles as there are fixed font sizes where I would use ems to make things more flexible. I will also have to have a look at the inline formatting appearing on some pages for similar reason.

Just reading through this topic in the hope of finding a resolution to an issue I'm having with HMTL5 output.

I have used @font-face, but the fonts still aren't displaying in the output. So after some digging I noticed that the fonts folder (which is located in the stylesheets folder in the content organiser in Flare) isn't getting bundled into the output.

Is this what you mean by needing to manually supplying the fonts @Dave Lee? Do I need to add the fonts folder to the output bundle myself?

I had hoped that Flare might be smart enough to pull the folder into the output bundle in if they're called from the CSS and the path to them is defined.

Louise.

The fonts folder (and everything in Content folder) should be included in the HTML5 output.

My guess is that the fonts aren't being included because the target is using this setting: Advanced > Exclude content not linked directly or indirectly from the target.
I've tried that setting in the past and found it has problems, as it can exclude files that are linked.

Dave Lee wrote:The fonts folder (and everything in Content folder) should be included in the HTML5 output.

My guess is that the fonts aren't being included because the target is using this setting: Advanced > Exclude content not linked directly or indirectly from the target.
I've tried that setting in the past and found it has problems, as it can exclude files that are linked.

That is useful to know Dave. I did resolve my issue in the end but this is useful info thank you.

Louise Bennett wrote:I have used @font-face, but the fonts still aren't displaying in the output. So after some digging I noticed that the fonts folder (which is located in the stylesheets folder in the content organiser in Flare) isn't getting bundled into the output.

The standard @font-face script wasn't working in our project either; it was rendering with Arial instead. Adding the @import function to our Masterpage seemed to work: