Problem on displaying fonts in webgl on some devices

p5.js Libraries
1

Hi folks!
Is have a strange issue thats driving me insane and cant figure out the problem
Im kinda new to p5js and have a little experience with processing java.
I’ve made a lyrics visualizer sketch for a friends song, with some syncro lyrics, in glitch.me.

The problem is that on certain devices, I cant se the fonts.

I have no problem on desktop and on some devices the fonts are displayed correctly. But, on my phone (Samsung Galaxy A51) I cant see the text of the lyrics
Im using Webgl and tried some ttf and otf without success
What am I missing?

Heres the code:

https://glitch.com/edit/#!/munoz-atenta

I’ve tried to also post the link to the standalone version from gtlichme but new users can only post 1 link

thanks in advance!

2

So, I’ve made a Minimal, Reproducible Example of my error, just to see if it stills persists… but no luck yet…
Hope someone could find it clearer this way:

p5.js Web Editor | ejemplo del error (p5js.org)

3

Here’s the code too:


  let buffer1, buffer2;

  let miFuente;

  function preload() {
    miFuente = loadFont('./assets/qanoar.personal-use.otf');

  }

  function setup() {
    createCanvas(windowWidth, windowHeight);
    buffer1 = createGraphics(windowWidth, windowHeight, WEBGL);
    buffer2 = createGraphics(windowWidth, windowHeight, WEBGL);
    background(0);
  }

  function draw() {
    buffer1.push();
    buffer1.noStroke(0);
    buffer1.translate(0, 0, 0);
    buffer1.texture(buffer2); // meto la textura de salida en la entrada
    buffer1.plane(windowWidth, windowHeight,100,100); // dibujo la textura de salida en la entrada

    //buffer1.box(100);
    buffer1.pop();

    dibujarTextoPrueba();


    //meto lo que hice en la imagen de salida para reusarla despues
    buffer2.push();
    buffer2.scale(1.005, 1.005); //hago transformaciones
    buffer2.texture(buffer1); //meto la textura de salida
    buffer2.plane(windowWidth, windowHeight,100,100); //dibujo la textura de salida
    buffer2.pop();

    image(buffer2, 0, 0, windowWidth, windowHeight);
  }




  function dibujarTextoPrueba() {
    buffer1.push();
    buffer1.textFont(miFuente);
    buffer1.textSize(100);
    buffer1.fill(255, 0, 0);
    buffer1.noStroke();
    buffer1.ellipse(0, 0, 200, 200);
    buffer1.fill(255, 255, 255);
    buffer1.textAlign(CENTER);
    buffer1.text("Testing", 0, 0);
    buffer1.pop();
  }