p5.js text accents displaying

arieluzal · July 2016

I've been running into a small problem with a project trying to get p5.js to display accented characters (such as á) and other characters used in Spanish (such as ñ).

After some exploring, I found out that the problem only appears when using TrueType fonts. When using the default font or and OpenType font, accents are displayed correctly.

Does anybody know if there's a solution or workaround for this? I don't have OTF versions of the fonts I need for my project.

Here is some demo code

var FONT_TTF;
var FONT_OTF;

function preload() {
  FONT_TTF = loadFont("Arial.ttf");
  FONT_OTF = loadFont("TektonPro-Bold.otf");
}

function setup() {
  createCanvas(200, 100);
  fill(0);
  textFont(FONT_OTF);
  //textFont(FONT_TTF);
  text("Accents test: á é í ó ú ñ ", 50, 50);
}

Thanks!

GoToLoop · July 2016

In general fonts don't have all the available Unicode characters.
In order to have accented characters we need to pick some font which got them.

arieluzal · July 2016

Sure. Arial has all the characters I need.

Found a simple workaround converting my ttf fonts to otf.

Howdy, Stranger!

Categories

In this Discussion

p5.js text accents displaying

Answers