Add quotes when passing a string argument to text_font()

[adamantonio]

Fonts with spaces in their names must be quoted or they will not work in a sketch.

[nickmcintyre]

Thanks @adamantonio! Would you mind sharing a bit more about the issue?

I tried using "Courier New" with p5.js 1.9.2 and PyScript 2024.3.2 on macOS and it seemed to work fine:

from proceso import Sketch


p5 = Sketch()
p5.describe("Letters, numbers, and symbols are displayed in white on a gray background. Vowels are highlighted in pink.")


def setup():
    p5.create_canvas(710, 400)

    # Set text characteristics
    p5.text_font("Courier New")
    p5.text_size(32)
    p5.text_align(p5.CENTER, p5.CENTER)


def draw():
    p5.background(160)

    # Set the gap between letters and the left and top margin
    gap = 52
    margin = 10
    p5.translate(margin * 4, margin * 4)

    # Set the counter to start at the character you want
    # in this case 35, which is the # symbol
    counter = 35

    # Loop as long as there is space on the canvas
    for y in range(0, p5.height - gap, gap):
        for x in range(0, p5.width - gap, gap):
            # Use the counter to retrieve individual letters by their Unicode number
            letter = chr(counter)

            # Add different color to the vowels and other characters
            if (
                letter == "A"
                or letter == "E"
                or letter == "I"
                or letter == "O"
                or letter == "U"
            ):
                p5.fill("#ed225d")
            else:
                p5.fill(255)

            # Draw the letter to the screen
            p5.text(letter, x, y)

            # Increment the counter
            counter += 1


p5.run_sketch(preload=preload, setup=setup, draw=draw)

[adamantonio]

This has just become a little more complicated... I've done some testing with this sketch:

from proceso import Sketch

p5 = Sketch()

p5.create_canvas(400, 700)
p5.background('darkslateblue')
p5.fill('white')
p5.text_align(p5.CENTER, p5.CENTER)
p5.text_size(50)

p5.text_font('Caveat')
p5.text('Hello', 200, 50)

p5.text_font('Pacifico')
p5.text('Hello', 200, 150)

p5.text_font('Tac One')
p5.text('Hello', 200, 250)

p5.text_font('Amatic SC')
p5.text('Hello', 200, 350)

p5.text_font('M Plus Rounded 1C')
p5.text('Hello', 200, 450)

p5.text_font('Press Start 2P')
p5.text('Hello', 200, 550)

p5.text_font('Wix Madefor Text')
p5.text('Hello', 200, 650)

Each of these fonts were imported from Google fonts and included in the HTML in the head of the document:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Caveat:wght@400..700&family=M+PLUS+Rounded+1c&family=Pacifico&family=Press+Start+2P&family=Tac+One&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">

Here are the results for me (Windows, PyScript 2024.2.1, p5js 1.8.0)

• The fonts that work are Caveat, Pacifico, Tac One, Amatic SC and Wix Madefor Text.
• The fonts that do not work are M Plus Rounded 1C and Press Start 2P. However, these do work if I enclose the font name in quotes - e.g. text_font('"Press Start 2P"')

Not sure what to make of this.

[nickmcintyre]

Ohh I remember this bug! It looks like it was recently addressed in p5.js 1.9.1.

I tested your sketch locally on (macOS Sonoma 14.4.1, Chrome 123.0.6312.105, PyScript 2024.2.1, p5.js 1.9.1) and it seems to work:

[adamantonio]

I thought it might have something to do with the numbers! Will update the p5js version.