Turn Your Handwriting into a Font

I was reading this blog by Christine and I thought it was a good idea to try and share it here. Turn your handwriting into a font and use it in your SAPUI5 application.

Just follow the instruction from Christine’s blog above and download the output TTF file: myfont.ttf.

Now is the SAPUI5 part.

Declare the font-face and .sapMLabel tag in your CSS:

<style>

  @font-face {

  font-family: ‘myfont’;

  src: url(‘fonts/myfont.ttf’) format(‘truetype’);

  }

  .sapMLabel {

  font-family: ‘myfont’ !important;

  font-size: 1.5rem;

  font-weight: normal;

  }

    </style>

And print out some words:

<script>
  var app = new sap.m.App("IconFontApp", {initialPage:"page"});
  var page = new sap.m.Page("page", {
  title: "Hello World this is testing of SAPUI5",
  content : new sap.m.Label({text:"Hello Mobile World! Welcome to the SAPUI5"})
  });
  app.addPage(page);
  app.placeAt("content");
    </script>

The complete code can be found in the attachment.