Custom CSS Fonts do not work when exporting to animated gif

1

Hello, I have a problem.
I have to export an animated banner as animated gif,
But when i export it, the custom font (visible in the editor) is
replaced by an other font.

How can I solve this problem?
Can anybody help me?

2

Is it possible to share the document or a reproduction?

Also, How are you adding the font?

Animated Gif should render the custom font. As a test I have rendered a gif with a custom google font.

3

Hi, yes, here is the document. I’m working on.

4

I added the files via the resources panel and than added custom css fonts the same way.

5

Your custom fonts are not being added due to the fact that the @font face code is not referencing the ${resourcesFolderName}/… path

So the fonts you see in the editor are not the Amadeus fonts that you got from Font Squirrel

In the CSS code that you add when adding a Custom Font you need to put the reference to the resources folder in front of the font name

e.g

    font-family: 'amadeusthin';
    src: url('${resourcesFolderName}/amadeus-thin-webfont.eot');
    ....

etc.

The exported animated gif goes off the information in your editor and not the rendered preview in a browser

Also your CSS code from Font Squirrel has some extra semi-colons that are not correct. Here is a sample of how the code should be when creating your own custom CSS.

<style>
@font-face {
    font-family: 'amadeusbold';
    src: url('${resourcesFolderName}/amadeus-bold-webfont.eot'),
         url('${resourcesFolderName}/amadeus-bold-webfont.woff2') format('woff2'),
         url('${resourcesFolderName}/amadeus-bold-webfont.woff') format('woff'),
         url('${resourcesFolderName}/amadeus-bold-webfont.ttf') format('truetype'),
         url('${resourcesFolderName}/amadeus-bold-webfont.svg#amadeusbold') format('svg')
    font-weight: normal;
    font-style: normal;
}
</style>

Here is your animated GIF after I’ve made the necessary adjustments :wink: