Why does this font show as boxes?

Processing
1

Hey, I didn’t know if this is the place to do this but I’m struggling to display this font on my sketch.



![Skærmbillede 2021-02-16 235044|391x418](upload://aec4gcHf61fJrbYaMZEfVufuKq2.jpeg)

As can be seen above the only thing that shows are boxes. If text() is run in the draw loop nothing shows at all

This is the code:

PFont font;

void setup() {
  size(400, 400);
  background(0);

  font = createFont("Casino.ttf", 100);
  
  textFont(font);
  textSize(100);
  text("1234", 0, height / 2);
}


Ive tested the font in MS Word where it works fine

2

Try textsize 24 or so in both spots where it says 100

3

Also, in menu Tools you can make a font, read the reference for pfont: PFont \ Language (API) \ Processing 3+

or the tutorial Typography \ Processing.org

4

Thanks for answering, but sadly neither of the methods work. When creating a font in the toolbar menu my selected font won’t show. I ofc made sure to install it on my pc first…

1 Like
5

Hi @wilwol ,

Do you want the font because you want to show the four suits of a playing card deck? I looked up the character encodings here, then tried this code

PFont arial;
PShape spade;
PShape heart;
PShape diamond;
PShape club;
int textSize = 96;

void setup() {
  size(512, 256, JAVA2D);

  arial = createFont("Arial", textSize);

  spade = arial.getShape('\u2660', 0);
  club = arial.getShape('\u2663', 0);
  heart = arial.getShape('\u2665', 0);
  diamond = arial.getShape('\u2666', 0);

  heart.disableStyle();
  spade.disableStyle();
  diamond.disableStyle();
  club.disableStyle();

  textAlign(CENTER, CENTER);
  textSize(textSize);
  textFont(arial);
}

void draw() {
  background(#202020);
  noStroke();
  fill(#fff7d5);
  shape(spade, width * 0.2, height * 0.5);
  shape(heart, width * 0.4, height * 0.5);
  shape(diamond, width * 0.6, height * 0.5);
  shape(club, width * 0.8, height * 0.5);

  text("\u2660 \u2663 \u2665 \u2666", width * 0.5, height * 0.75);
}

For some fonts it showed boxes, for others it worked and showed the suits. You could also source an SVG for each suit and use loadShape; or find raster images to load with loadImage.

Best,
Jeremy

2 Likes
6

Thanks for your reply. I was trying to build a slot machine as a fun little project. I thought this font would be an easy and efficient way to display the spinning reel icons. I ended up just displaying images as it didn’t noticable slowed anything down. I was unaware of the PShape object, very cool, i will keep that in mind :sunglasses: