How to create a text layer and change font family?

cuse

I cannot for the life of me figure out how to create a text layer and set the font via Sketch plugin. I'm following this documentation https://developer.sketchapp.com/reference/api/#font.

var Document = require('sketch/dom').Document;
var Text = require('sketch/dom').Text;

export default function (context) {
const document = sketch.fromNative(context.document)
const page = document.selectedPage;

var text = new Text({
parent: page,
text: 'blah',
});

// THIS DOESNT WORK
text.font = 'Arial';
}

kevgski

Hiya cuse

Definitely understand your frustration. Currently its a bit tricky to set a font. This will change soon (if you are curious you can see the changes to font here under the "support for text styles" section). Anywho, if you are looking to do this right now here is an example:

const text = new Text({
  text: 'hello',
  frame: new Rectangle(10,10,100,100),
  parent: document.pages[0].layers[0]
 })

var newFont = NSFont.fontWithName_size('Arial', 16)

text.sketchObject.setFont(newFont)

I couldn't seem to get .font to work. If you look at the documentation it requires an instance of NSFont in order to set the font. So attempting to set it with a string "Arial" wouldn't work. However the example below also doesn't work.

var newFont = NSFont.fontWithName_size('Arial', 16)
text.font = newFont

To work around this, there is a useful function called setFont() on MSTextLayer so I dropped down to use that.

katyusha

kevgski

Thank you!

Would it be possible to do this per character?

e.g. 'Hello'

'He' would be 'Helvetica-Oblique'
'll' would be 'Helvetica-BoldOblique'
'o' would be 'Helvetica'

kevgski

You can, however it's a bit more complicated to do so. I’ve replied to your other thread: https://sketchplugins.com/d/1223-how-to-add-font-attributes-to-a-text-layer/2

pizza0502

Here is how I do it and it works for me:

var Document = require('sketch/dom').Document;
var Text = require('sketch/dom').Text;

export default function (context) {
const document = sketch.fromNative(context.document)
const page = document.selectedPage;

var text = new Text({
    parent: page,
    text: 'blah',
    style: {
        fontFamily: 'Arial',
        fontSize: 16,
    }
});

TChengZ

pizza0502 i got message
'no idea what to do with "fontFamily" in Style'
'no idea what to do with "fontSize" in Style'

mathieudutour

what version of Sketch are you using?