Skip to content

How to render text with Cufon (deprecated)

Jump to bottom
kangax edited this page Jan 17, 2013 · 1 revision

Text rendering in fabric is done by adding fabric.Text objects to canvas. fabric.Text objects inherit from fabric.Object and so are just like any other objects — can be moved, rotated, scaled, etc.

One important distinction of fabric.Text objects is that they render text using certain font. That's why the font .js file — describing how glyphs are to be rendered — should be included in the page before text object is added/rendered on canvas.

Some of the free fonts are included as examples under /lib/fonts; You can use Cufon builder to create them yourself (from .ttf, .otf, etc.)

Once font file is present, you can add text object to canvas like this:

canvas.add(new fabric.Text('foo', { 
  fontFamily: 'Delicious_500', 
  left: 100, 
  top: 100 
}));

Note how "fontfamily" option specifies which font to use to render this text object. In this case it's "Delicious_500" and it has to match what's defined in the font file:

Cufon.registerFont({ "w": 162, "face":{ "font-family": "Delicious_500", "font-weight": 500, ...

Here is a complete example. Note that you must have fabric.js and the font.js files located on your server.

<html>
  <head>
    <title>Text Rendering Example</title>
    <script src="fabric.js"></script>
    <script src="Delicious_500.font.js"></script>
  </head>
  <body>
    <canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
    <script>
      var canvas = new fabric.Canvas('canvas');

      var textObj = new fabric.Text('Hello Text!', { 
          fontFamily: 'Delicious_500', 
          left: 400,
          top: 225,
          fontSize: 80,
          textAlign: "left",
          fill:"#FF0000"  // Set text color to red
      });

      canvas.add(textObj);
    </script>
  </body>
</html>

See this workaround if text bounds are rendered incorrectly.

Here is a jsFiddle page with fonts preloaded: Link

Clone this wiki locally