Skip to main content
Inspiring
February 27, 2023
Answered

Help with Open Type font when publishing HTML5 canvas

  • February 27, 2023
  • 1 reply
  • 1694 views

Looking for some advice please.

I have an Open Type font (Atomic marker) that I need to use in a HTML5 canvas and publish it on the internet.

The font is set to dynamic text.

I've added it to my creative cloud fonts but it still doesn't view correctly on the internet.

I can't embed the font because that doesn't support html5 canvas.

Any advice would be greatly appreciated.

Thank you

 

 

 

This topic has been closed for replies.
Correct answer JoãoCésar17023019

I've PM'd you


Thanks for the file.

 

Now that I spoted other mistakes in your code. The font-family property value should be "Atomic Marker", the font extension is .otf and you didn't close the style tag (</style>). To sum up, your code should be like this (the f in font-face is lowercase):

 

 

<style>
    @11220649-face
    {
        font-family: "Atomic Marker";
        src: url("AtomicMarker.otf");
    }
</style>

 

 


Preview (it takes a few seconds for the font to load):
https://adobe-animate-font-face-test.netlify.app/

 

I hope this helps.

 

Regards,

JC

1 reply

kglad
Community Expert
Community Expert
February 27, 2023

what do you mean by you "added it to my creative cloud fonts"?

 

did you add it to your textfield in animate:

 

 

Inspiring
February 28, 2023

I had my font in Connect Fonts from Extensis. Adobe suggested adding it to my Creative Cloud.

https://helpx.adobe.com/in/creative-cloud/help/add-your-fonts-to-creative-cloud.html#sa_src=web-messaging

It didn't help...

JoãoCésar17023019
Community Expert
Community Expert
February 28, 2023

Hi.

 

Please find in this link some information of how fonts work in Animate.
https://community.adobe.com/t5/animate-discussions/how-do-you-import-fonts-to-adobe-animate/m-p/13548167#M362106

Regards,
JC