Embedding fonts in Adobe Captivate 2017

Report · May 12, 2017

Hi everyone,

We're using our corporate fonts in our courses. When we had Captivate 9 we embedded these fonts using this method How to embed fonts in Adobe Captivate - Flick Learning.

It worked fine until we've upgraded our Captivate. now, when we wanted to repeat the process, my Captivate crashed. I had to re-install it twice.

Do you know how we can embed fonts in the newer version? Or at least why we can't do this in the newer version? Perhaps, the principle of handling css files changed or whatever?

Any information will be very helpful, thank you.

Report · May 12, 2017

Captivate 2017 now has Typekit integration. That's probably conflicting with the method you were previously using.

Report · Jun 14, 2017

What are the process steps please, or a link to them, I'm not an advanced user, but would appreciate any guidance, thank you. I also need to embed company brand colours RGBs. How do you add them so they stay there permanently.

Report · Jun 15, 2017

I can help with the colors, not with the font if you don't want to use Typekit.

Have a look at this post:

Theme Colors - Captivate blog

Complementary to that one:

What's in a Theme - a Template? - Captivate blog

Report · Apr 30, 2018

I tried syncing my font with typekit, and my output still shows Times New Roman (I think) instead of my chosen font. Now I'm trying to use the google fonts method, but my course won't publish without a typekit domain! I've unsynced the font from Typekit...what next??? How do I bypass the typekit domain entry on the publish settings?

Report · Apr 30, 2018

I'm having this same issue! Interested to hear if anyone has any advice!

Report · May 01, 2018

Sorry to hear Typekit is not working for you. All my recently published movies do use Typekit fonts, and I don't have issues. Maybe you are missing something in the workflow. You also have to know that the free Tk account includes has a minimum included, do you have a CC account? Here is one of my movies, including several Tk fonts:

Shared Actions

Report · May 01, 2018

Thank you Lilybiri. I believe that Typekit is working for many people; I just can't seem to get it working for me, and it appears I'm inextricably tied to it in my course now.

Typekit has a miniumum what included? Purchasing minimum?

I do have a CC account. I'm using a purchased template and suspected that the issue may be rooted in a conflict with a Google font association (script executed in slide 1), but at this point, I've spent more time than I have trying to figure it out, and I just want to be able to publish a working course for my bosses to review.

My big questions:

What domain is supposed to go in the Typekit domain bar? The link to my CC account? The LMS? In other resources I've found online I read that the domain of the "website" you want the font to appear on needs to have an association placed in the head, but how would that even work with an LMS (or Adobe Connect, which is what my organization uses)?
And if I can't get it to work, how do I disassociate the course with Typekit? It's not letting me publish without entering a "Typekit domain" in that space.

Report · May 01, 2018

I am not totally sure, but think the free plan is 20 fonts. Beware one font family can include many fonts. Do you have an Adobe ID? The same ID as is linked with the Captivate activation? When publishing you have to add the domain(s). That is restricted as well for the free plan (have a CC plan, which is 100 fonts). Type in one domain, that should be OK.

Report · May 01, 2018

Thanks for the fast reply! What domain? That's super unclear to me. Is it typekit.com?

Report · May 01, 2018

Sorry, now I'm sending questions that are too short. My questions:

Is the DOMAIN I enter the domain where the FONT lives (typekit??) or where the COURSE lives (LMS, or in my case, a content server where Adobe Connect content is hosted)?
I believe my CC account includes 100 typekit fonts (that's what's displayed when I go to Typekit). I've only tried to sync one font family, so I'm certainly not over that limit.

Report · May 01, 2018

Sorry, was busy for a moment. You need to add the domain where you will upload the course. Example: my published courses are uploaded to my domain : www.lilybiri.com. I will type that domain in the field. Since I have a CC account, I can add more domains, like 'localhost' which is used when you try to view the published course locally. However with the free plan, you can indicate only one website. More info on:

Plans | Typekit

Report · May 01, 2018

Really right now, I'm just frustrated and out of time. Can you just tell me how to disassociate with Typekit? It's forcing me to enter something in the Typekit domain bar in order to publish even though I unsynced.

Report · May 01, 2018

Jordan, I contacted Typekit and they instructed me to turn off the sync function in Creative Cloud. I'm not fully resolved, but try this and see if it works for you:

The fastest way to remove any Typekit fonts is to turn off the font sync option in the Creative Cloud desktop application. This will unsync the fonts from your computer (temporarily), so they are not available to Captivate or any other desktop software programs.

To turn off font sync:
1. Open the menu from the three dots at the top of the Creative Cloud desktop application.
2. Choose Preferences > Creative Cloud > Fonts
3. Un-check Typekit Sync to turn off font sync. I've attached a screenshot for reference.

Then you should be able to publish the Captivate project without being asked for a Typekit domain name.

Report · Jun 14, 2017

I have the same question, how do you embed company fonts into Captivate 2017, anyone? and how do you change the default setting from Trebuchet MS to your own company brand font?

Report · Jun 15, 2017

If your corporate fonts are accessible online through a link, the following approach should always work.

If you need help implementing this, let me know.

“Using web fonts in Adobe Captivate” @hdecisions

https://medium.com/@hdecisions/using-custom-fonts-in-adobe-captivate-592350d4c650

Report · Jun 15, 2017

I'm troubleshooting the same issue for our company. I think there's a conflict with the "@import url" step. The fonts and fonts.css file still show up in the project directory when a course is published, so the workaround is adding the fonts.css file to the course using an alternate method. I haven't had a chance to fully test this, so be mindful of that, but I had success with this method today:

Try adding an On Enter > Execute JavaScript action to the first slide of your project using the following code:
document.querySelector('head').innerHTML += '<link rel="stylesheet" href="assets/css/fonts/fonts.css" type="text/css"/ >';

That worked for me today, but I could only test briefly. The downside is you'll get a flash of un-stylized text on the first slide.

Report · Jun 15, 2017

The flash of unformatted text is a tough one.

One strategy for preventing it is to put a dummy blank slide at the start of the presentation with a timing of 0.1 seconds, placing your "on enter" javascript there.

Report · Jun 15, 2017

That's a good tip, thanks! Alternatively, I was considering a slight delay on the timeline for any text objects which appear on the first slide as well. Always good to have options! Thanks again

Report · Jun 15, 2017

"slide fade in" may also get you there without having to mess with individual elements on the time line.

Report · Jul 21, 2017

To remove the flash of unformatted text, I added the script I mentioned above to the index.html file within C:\Program Files\Adobe\Adobe Captivate 2017 x64\HTML. The index.html file in that folder acts as the boilerplate/construct for all published Captivate files, so I assumed if I add it there it will do the work for me before the project loads.

That file has a line of code near the end of it that reads: document.getElementsByTagName('head')[0].appendChild(script);
I believe it's at line 115 if you're using a code editor. If you place the script I mentioned above just above that line of code, it will add the CSS file before the project loads.

You'll need to make sure you nest it properly within the code, but that was the best fix. Now I'm set for all projects going forward. I'm having my team test, before we cascade the solution throughout our business unit. Hope that helps

Report · Jul 06, 2017

Thanks for your advice. I guess I should create the fonts.css file first? I checked the assets folder and couldn't find one.

After further investigation my colleague from IT said that he managed to write a code and minimise the amount of work he needs to do form his end, but there's a file that he still has to edit manually to make sure fonts are embedded. It's the js (CPM) file. We looked at it and noticed that our fonts are there but for some reason they are being overwritten by another font, I've included an example. I really don't know if I can do anything form my end to change the way projects are being published? Any ideas?

Here's the example

<span style="">Dry hands using disposable paper towels</span></span><span class="cp-actualText" style="line-height:100%;color:#575755;font-size:26px;font-family:\'FS Albert regular\',FS Albert;"><br></span></div></div>'

but then

<div><div style="margin-left:0px;display:block;text-align:center;"><span class="cp-actualText" style="line-height:100%;color:#575755;font-size:14px;font-family:\'Trebuchet MS regular\',Trebuchet MS;"><span style="">Dry hands using disposable paper towels</span></span><span class="cp-actualText" style="line-height:100%;color:#575755;font-size:14px;font-family:\'Trebuchet MS regular\',Trebuchet MS;"><br></span></div></div>'

Report · Jul 06, 2017

have you looked at the following post?

https://elearning.adobe.com/2017/03/using-custom-fonts-in-adobe-captivate/?query=fonts

Report · Jul 06, 2017

No, haven't seen it, but will take a look right now. Thank you!

Report · Jul 21, 2017

Yes, you will need to create the fonts.css file. It won't show up on it's own. It uses the @font-family CSS property.