Providing a TrueType Font (TTF)

We found this Stackoverflow page most useful for this Smart Pascal demonstration. See the instructions in the comment at the start of the code. If the coded font is unavailable, a browser will use a default font to render the text. You can compare the on-line output with the screenshot below it to check that the supplied Casper font is being used. The letter Q is distinctive. Internet Explorer 11, Chrome, Safari and Opera show the supplied Casper font but Firefox 35.0.1 does not. If you see no display at school, the security system might have blocked it. You can try instead this direct link to the program running on its own page.

When using Version 3.0 of Smart Mobile Studio, change the line Canvas.Font := '18px Casper'; to Canvas.FontStyle := '18px Casper';.

unit Unit1;
// 1. Append to app.css the code
//    @font-face {
//     font-family: 'Casper';
//     src: url('Casper.ttf');
//    }
// 2. Put Casper.ttf (from casper.zip which includes a SIL Open Font License
//    copyright statement downloadable from  https://www.behance.net/mchereda)
//    in the res folder
// 3. Rename app.css in the res folder to appttf.res.
//    (otherwise app.css will be overwritten by another application). 
// 4. Change the corresponding line 13 in your created Supplied_TTF_Demo.html to 
//    <link rel="stylesheet" type="text/css" href="res\appttf.css"/>    

interface

uses 
  System.Types, SmartCL.System, SmartCL.Components, SmartCL.Application,
  SmartCL.Game, SmartCL.GameApp, SmartCL.Graphics;

type
  TCanvasProject = class(TW3CustomGameApplication)
  protected
    procedure ApplicationStarting; override;
    procedure ApplicationClosing; override;
    procedure PaintView(Canvas: TW3Canvas); override;
  end;

implementation

procedure TCanvasProject.ApplicationStarting;
begin
  inherited;
  GameView.Delay := 20;
  GameView.StartSession(False);
end;

procedure TCanvasProject.ApplicationClosing;
begin
  GameView.EndSession;
  inherited;
end;
 
procedure TCanvasProject.PaintView(Canvas: TW3Canvas);
begin
  // Clear background
  Canvas.FillStyle := 'rgb(0, 0, 99)';
  Canvas.FillRectF(0, 0, GameView.Width, GameView.Height);
  Canvas.FillStyle := 'white';
  Canvas.Font := '18px Casper';
  Canvas.FillText('ABCDEFGHIJKLMNOPQRSTUVWXYZ', 5, 200);
  Canvas.FillText('abcdefghijklmnopqrstuvwxyz', 5, 250);
  Canvas.FillText('0123456789', 5, 300);
end;

end.