0

I followed the instructions to load a custom font in a html canvas text field. It works fine when I open the page with the Desktop Chrome browser but when I open it with the Chromecast receiver application the font is not loaded. What could be the problem?

Defining the custom font:

<html>
<head>
<style type="text/css">

@font-face {
  font-family: 'myfont';
  src: url('myfont.TTF') ;
}

Actual text:

ctx.font = "30px myfont";
ctx.fillText("MyText:",50, 50);
N Jacobs
  • 341
  • 2
  • 16

2 Answers2

1

You can use Styled Media Receiver that allows the sender to play media on a Cast device without creating your own custom receiver application by providing your own CSS file during registration.

Here are the list of Pre-installed fonts that can be used with the receiver:

  • Droid Sans, sans-serif
  • Droid Sans Mono, monospace
  • Droid Serif Regular, serif
  • Cutive Mono
  • Short Stack
  • Quintessential
  • Alegreya Sans SC

Here are the classes that can be used in SMR:

  • .background: The background for the receiver.
  • .logo: The logo shown when the receiver is launching. This class is also used when the receiver is in the idle state and no .splash class is declared.
  • .progressBar: The progress bar for media playback.
  • .splash: The screen shown when the receiver is in an idle state. If this class is not declared, the receiver will default to .logo or the app name.
  • .watermark: A watermark shown when the media is playing.
droidBomb
  • 850
  • 5
  • 8
0

The problem was that apparently the font was not loaded, using the solution from Drawing text to <canvas> with @font-face does not work at the first time, placing the 

<div style="font-family: PressStart;">.</div>

in the preload made it working.

N Jacobs
  • 341
  • 2
  • 16