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?
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?
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.
I added the files via the resources panel and than added custom css fonts the same way.
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