Skip to content

Cannot use custom font #624

Closed
Closed

Description

@sungwoncho

I am following the example/font.js to use a custom font, but the font does not show up.

Here is what I have so far:

var Canvas = require('canvas')
    , Image = Canvas.Image
    , Font = Canvas.Font
    , path = require('path');

var gubblebum = new Font('gubblebum', fontFile('GUBBLO___.ttf'));

function fontFile(name) {
  return path.join(__dirname, '../fonts', name);
}

function draw() {
  var canvas = new Canvas(100, 100)
    , ctx = canvas.getContext('2d');

  ctx.addFont(gubblebum);
  ctx.font = 'bold 40 gubblebum';
  ctx.fillText('test', 25, 45);

  return canvas;
}

module.exports = draw;

When rendered in a browser, the font is left unchanged from the default, as well as the size.

Interestingly, when I do ctx.font = 'bold 40 someGibberish'; the font size is applied correctly.

Activity

  1. chearon commented on Feb 9, 2016

    @chearon
    Collaborator

    is this happening on OS X? I'm trying to narrow down on the issue (see #628)

  2. sungwoncho commented on Feb 9, 2016

    @sungwoncho
    Author

    Yes it happened on OSX Yosemite.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions