• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Help with Open Type font when publishing HTML5 canvas

Contributor ,
Feb 27, 2023 Feb 27, 2023

Copy link to clipboard

Copied

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

 

 

 

TOPICS
ActionScript , Code , How to , Publish package , Timeline

Views

962

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 28, 2023 Feb 28, 2023

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>
    @Font-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/

...

Votes

Translate

Translate
Community Expert ,
Feb 27, 2023 Feb 27, 2023

Copy link to clipboard

Copied

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

 

did you add it to your textfield in animate:

 

kglad_0-1677534993747.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 27, 2023 Feb 27, 2023

Copy link to clipboard

Copied

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-mess...

It didn't help...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

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/1354...

Regards,
JC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

Hi, thank you for replying.

 

So in terms of run time, my text fields are dynamic.

 

Could you explain the @Font-face CSS rule to include the necessary font files, please?

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

Hello. Thank you for the links. Really useful.

 

I've added this code to my html file. Still no joy:

<style>
@Font-face
{
font-family: "Atomic Marker Regular";
src: url("AtomicMarker.oft");
}
<style>

 

Am I missing something?

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

The selector must be lower case (@ font-face).

 

Also, it's a little tricky to get the correct name and source for the font. Please double check these infos.

 

EDIT: I just found out that the this comment's editor is changing the F to upper case.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

Thank you.

Presume it works with otf font files.

In terms of url, I've followed your example. Do I need to add anything else to the path?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

If the name of the file is exactly AtomicMarker.oft and this file is located in the same folder as the .html file, then it should work.

 

Do you mind posting a link to the font file so that I can test on my end as well?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

I've PM'd you

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

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>
    @Font-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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

Amazing! Thanks so much.

Another step forward...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

LATEST

You're welcome!

 

Please let us know if you need further assistance.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines