Page 1 of 1

Embedded font in HTML5 skin

Posted: Wed Jan 23, 2019 2:23 pm
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

Re: Embedded font in HTML5 skin

Posted: Thu Jan 24, 2019 12:46 am
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.

Re: Embedded font in HTML5 skin

Posted: Tue Jan 29, 2019 7:02 am
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.

Re: Embedded font in HTML5 skin

Posted: Wed Jan 30, 2019 12:47 am
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.

Re: Embedded font in HTML5 skin

Posted: Thu Jan 31, 2019 1:52 pm
by BPell
I went with (b) and it works like a charm now.

Thanks, Dave - You are brilliant and wonderful!