q5play
    Preparing search index...

    Function loadFont

    • 📘 Loads a font from a URL.

      The first example below loads Robotica.

      The second example loads Pacifico from Google fonts.

      By default, assets are loaded in parallel before q5 runs draw. Use await to wait for a font to load.

      Fonts in MSDF format with the file ending "-msdf.json" can be used for high performance text rendering. Make your own using the MSDF font converter.

      If no fonts are loaded, q5 WebGPU will lazy load the default MSDF font from q5js.org. Until it is loaded, the system's default sans-serif font will be used via textImage.

      Parameters

      • url: string

        URL of the font to load

      Returns FontFace & PromiseLike<FontFace>

      font

      await Canvas(200, 56);

      await loadFont('/assets/Robotica.ttf');

      fill('skyblue');
      textSize(64);
      text('Hello!', -98, 24);
      await Canvas(200, 74);

      loadFont('fonts.googleapis.com/css2?family=Pacifico');

      q5.draw = function () {
      fill('hotpink');
      textSize(68);
      text('Hello!', -98, 31);
      };
      //
      await Canvas(200, 74);

      await loadFont('sans-serif'); // msdf

      fill('white');
      textSize(68);
      text('Hello!', -98, 31);