# Problem on displaying fonts in webgl on some devices

**URL:** <https://discourse.processing.org/t/problem-on-displaying-fonts-in-webgl-on-some-devices/38329>\
**Category:** Libraries\
**Created:** [August 12, 2022, 8:03pm UTC](https://discourse.processing.org/t/problem-on-displaying-fonts-in-webgl-on-some-devices/38329 "2022-08-12T20:03:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Parabola](https://avatars.discourse-cdn.com/v4/letter/p/9de0a6/32.png) [@Parabola](https://discourse.processing.org/u/Parabola)\
**Post date:** [August 12, 2022, 8:03pm UTC](https://discourse.processing.org/t/problem-on-displaying-fonts-in-webgl-on-some-devices/38329/1 "2022-08-12T20:03:47Z")

</div>

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](http://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](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!

---

<div class="post-metadata">

**Author:** ![Parabola](https://avatars.discourse-cdn.com/v4/letter/p/9de0a6/32.png) [@Parabola](https://discourse.processing.org/u/Parabola)\
**Post date:** [August 23, 2022, 2:55am UTC](https://discourse.processing.org/t/problem-on-displaying-fonts-in-webgl-on-some-devices/38329/2 "2022-08-23T02:55:00Z")

</div>

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)](https://editor.p5js.org/lisandroperalta/sketches/CbwrpflKU)

---

<div class="post-metadata">

**Author:** ![Parabola](https://avatars.discourse-cdn.com/v4/letter/p/9de0a6/32.png) [@Parabola](https://discourse.processing.org/u/Parabola)\
**Post date:** [August 23, 2022, 5:30pm UTC](https://discourse.processing.org/t/problem-on-displaying-fonts-in-webgl-on-some-devices/38329/3 "2022-08-23T17:30:41Z")

</div>

Here’s the code too:

```auto

  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();
  }

```