Embedded font in HTML5 skin

This forum is for all Flare issues not related to any of the other categories.
Post Reply
BPell
Propeller Head
Posts: 11
Joined: Tue Sep 11, 2018 12:31 pm

Embedded font in HTML5 skin

Post by BPell »

I've found the following solution to getting my custom font applied to my project's skin:
http://kb.madcapsoftware.com/Content/Mi ... utputs.htm (See the Optional section)

It solves my problem, but it requires me to perform this procedure every time I build the project.

Is there any way to automatically embed the font in the skin? It's not the end of the world if it has to be done manually, but it would be nice to not have to worry about it with each build.

Thanks!
-Barbara
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Embedded font in HTML5 skin

Post by NorthEast »

Slightly surprised MadCap support suggest manually editing the output files, as there's a much easier way.

You can add a stylesheet link to a Tripane skin using javascript.

First create a stylesheet in your project with your font-face code; e.g. Content/Resources/Skin/Skin-Stylesheet.css

Then in the skin's Toolbar tab, click Edit (on the right) to insert some custom javascript:

Code: Select all

$('<link>')
  .appendTo($('head'))
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', 'Content/Resources/Skin/Skin-Stylesheet.css');
That javscript adds a html <link ..> to your stylesheet, at runtime in the browser.
This means you never need to manually edit any of your output files.
BPell
Propeller Head
Posts: 11
Joined: Tue Sep 11, 2018 12:31 pm

Re: Embedded font in HTML5 skin

Post by BPell »

Thanks so much, Dave. Apologies for my late response.

I've done as you suggested, but results are mixed in that it only works in a couple of my projects. I can't for the life of me figure out why it won't work in my current project. It's quite a large project that has had multiple authors so the stylesheet has become a bit of a mess, but until I have time to create a new one I'm struggling to make this one work. Something must be creating a conflict, but I have no clue what it could be.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Embedded font in HTML5 skin

Post by NorthEast »

If it doesn't work, it's most likely because the target uses the setting Advanced > Exclude content not linked directly or indirectly from the target.

Using that setting will exclude the stylesheet file from the output, because Flare can't "see" it is linked (it doesn't see links in scripts).
The solution is to (a) insert a link to that stylesheet somewhere (e.g. a link in a single topic will do), or (b) don't use that setting.
BPell
Propeller Head
Posts: 11
Joined: Tue Sep 11, 2018 12:31 pm

Re: Embedded font in HTML5 skin

Post by BPell »

I went with (b) and it works like a charm now.

Thanks, Dave - You are brilliant and wonderful!
Post Reply