Highlighted

Animate to Canvas Webfont fallback option

Participant ,
May 09, 2019

Copy link to clipboard

Copied

Hello.

This will be two questions.

Question A)

I'm embedding a Google Font in my animation for Canvas. Because I use Cloudflare, which caches fonts, I keep the font, PT Sans Caption, in a folder on the server on the same domain. Fortunately the animation doesn't need the font immediately. It runs for a few seconds first. I load the font in CSS, @font-face and no JS.

Is that recommended though? If something were to go wrong? The loader script can check if a font has loaded, while it does not appear to invoke a fallback font.

If 'PT Sans Caption' is available,

this.object = new cjs.Text("my text", "normal 400 11px 'PT Sans Caption'", "#416263");

otherwise,

this.object = new cjs.Text("my text", "normal 400 11px 'Verdana'", "#416263");

Are there instructions for embedding a fallback font?

My other question)
What happens to embedded Adobe Fonts in the event that a Creative Cloud subscription ends? Does the font link expire online in an active animation?

A correct answer to question A scores ten points. Thanks.

Views

66

Likes

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

Animate to Canvas Webfont fallback option

Participant ,
May 09, 2019

Copy link to clipboard

Copied

Hello.

This will be two questions.

Question A)

I'm embedding a Google Font in my animation for Canvas. Because I use Cloudflare, which caches fonts, I keep the font, PT Sans Caption, in a folder on the server on the same domain. Fortunately the animation doesn't need the font immediately. It runs for a few seconds first. I load the font in CSS, @font-face and no JS.

Is that recommended though? If something were to go wrong? The loader script can check if a font has loaded, while it does not appear to invoke a fallback font.

If 'PT Sans Caption' is available,

this.object = new cjs.Text("my text", "normal 400 11px 'PT Sans Caption'", "#416263");

otherwise,

this.object = new cjs.Text("my text", "normal 400 11px 'Verdana'", "#416263");

Are there instructions for embedding a fallback font?

My other question)
What happens to embedded Adobe Fonts in the event that a Creative Cloud subscription ends? Does the font link expire online in an active animation?

A correct answer to question A scores ten points. Thanks.

Views

67

Likes

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
May 09, 2019 0

Have something to add?

Join the conversation