September 11, 2019
Individual Fonts
Comments
(6)
September 11, 2019
Individual Fonts
Newbie 9 posts
Followers: 0 people
(6)

I am in need of an individual font for an Arabic project, but my company won’t purchase a Stock subscription, only the font.  Does anyone know a way to do that and bring it in to Captivate if it’s not Adobe Fonts?

6 Comments
2019-09-17 17:28:43
2019-09-17 17:28:43

Link to more comprehensive instructions for embedding new system fonts: https://elearning.adobe.com/2019/09/embedding-new-system-fonts-adobe-captivate-2019/

Like
2019-09-12 21:47:43
2019-09-12 21:47:43

Hi,

There are a couple of ways you can add your font to your Captivate project –either as a web font or by embedding the font within the published output.

If the font is available via Google Fonts, the following blog post by Steven Warwick outlines how you can add it to your project using some simple JavaScript.

As for embedding the font in your project… I’ve been trying to add instructions to this comment, but the system keeps rejecting them so I think the instructions are too long. So, I’ll write a quick blog post this weekend and add the link to this comment when it becomes available.

Like
2019-09-12 21:40:30
2019-09-12 21:40:30

Hi,

There are a couple of ways you can add your font to your Captivate project — either as an embedded font, or as a web font.

Web Font

If the font is available via Google Fonts (url), the following blog post outlines how you can add it to your project using JavaScript as outlined in the following blog post by Steven Warwick elearning.adobe.com/2017/03/using-custom-fonts-in-adobe-captivate/.

You can also embed fonts into your project by copying the font into your project’s Publish folder, and updating the project’s CSS file so that it knows where to look for the font. I did that in this project. The instructions are too long for this comment (I keep trying to post them, but the system keeps rejecting them), so I will write a blog post about it in the next day or so, and post the link in this comment when it becomes available.

 

Like
2019-09-12 21:37:32
2019-09-12 21:37:32

Hi,

There are a couple of ways you can add your font to your Captivate project.

If the font is available via Google Fonts (url), the following blog post outlines how you can add it to your project using JavaScript as outlined in the following blog post by Steven Warwick elearning.adobe.com/2017/03/using-custom-fonts-in-adobe-captivate/.

You can also embed fonts into your project by copying the font into your project’s Publish folder, and updating the project’s CSS file so that it knows where to look for the font. I did that in this project.

I think I Googled to find out how to do this, and I can’t remember the source so here are some rough instructions that I hope will be helpful to you right at this moment. I  don’t know how urgent your need is, but I will tidy up the instructions over the next day or so and post a blog on this forum with more details. Meanwhile, I hope this helps:

  1. Download  the font and install it on your computer. The font immediately becomes available to use in Adobe Captivate 2019, but if you don’t see it in the Font menu, restart Captivate.
  2. Build your project, using the font wherever you need it.
  3. Publish your project.
  4. Add the font to the published project by performing the following actions in the Publish folder (the location to which you published your project):
    1. Locate the css folder within the published output. (It’s located within the assets folder)
    2. In the css folder create a new folder called fonts ( actually, you can call this anything, but you need to remember its name).
    3. Copy the font into the newly created fonts folder.
    4. After copying the font, close the fonts folder and return to the css folder.
    5. Next you will need to create a css file that will tell browsers how to deal with your new font. So,while you are still in the css folder, use a text editor to create a file called font.css. In font.css, specify the font-family characteristics for your font (sorry, if you’re not familiar with HTML/CSS, I’ll provide more details about this later).
    6. Finally, you will need to update the file which tells the course where to find all its fonts — assets/css/CPLibraryAll.css. So, since you are still within the css folder, simply close your fonts.css file, and open CPLibraryAll.css.
    7. In CPLibraryAll.css,  add the following text to the to the very start of the file: @import url(“fonts.css”);  
    8. Save and close CPLibraryAll.css.

Copy your published project to your web server or wherever you need to run your project.

Note:

  1. Live preview on devices won’t show this modification. You will have to upload the course to your server/LMS to test the results.  
  2. Save a copy of your modifications to another folder outside of the published project, because if you publish the project again to the same location, your changes will be overwritten.

Best of luck!

Like
2019-09-12 07:37:01
2019-09-12 07:37:01

Here is the promised link:

http://blog.lilybiri.com/fonts-in-captivate

Like
2019-09-12 07:36:28
2019-09-12 07:36:28

By default Captivate projects do never embed fonts because of file size. Safest way is to use an Adobe font. Do you know that Captivate comes with a free plan for Adobe fonts? It is limited but you could find that font within that free plan.

There are some explanations around how to embed another font, you can google about it.

As long as you use only static text (no variables embedded) and it is a non-responsive project, you could use system fonts because the text containers are converted to images. However dynamic text has to be generated on runtime. Responsive projects cannot use this workaround neither. Another workaround is to convert the text containers manually to SVGs, which aver vector-based an remain crisp whatever the size.

Will post a link to an article about fonts I wrote recently.

Like
Add Comment