diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js
index a9be0a6211..e9e2195d30 100644
--- a/src/core/p5.Renderer2D.js
+++ b/src/core/p5.Renderer2D.js
@@ -1318,8 +1318,13 @@ class Renderer2D extends p5.Renderer {
       this._setProperty('_textStyle', this._textFont.font.styleName);
     }
 
+    let fontNameString = font || 'sans-serif';
+    if (/\s/.exec(fontNameString)) {
+      // If the name includes spaces, surround in quotes
+      fontNameString = `"${fontNameString}"`;
+    }
     this.drawingContext.font = `${this._textStyle || 'normal'} ${this._textSize ||
-      12}px "${font || 'sans-serif'}"`;
+      12}px ${fontNameString}`;
 
     this.drawingContext.textAlign = this._textAlign;
     if (this._textBaseline === constants.CENTER) {
diff --git a/test/unit/spec.js b/test/unit/spec.js
index 64c8cc8f91..c6a16946c0 100644
--- a/test/unit/spec.js
+++ b/test/unit/spec.js
@@ -51,7 +51,8 @@ var spec = {
   'visual/cases': [
     // Add the visual tests that you want run as part of CI here. Feel free
     // to omit some for speed if they should only be run manually.
-    'webgl'
+    'webgl',
+    'typography'
   ]
 };
 document.write(
diff --git a/test/unit/visual/cases/typography.js b/test/unit/visual/cases/typography.js
new file mode 100644
index 0000000000..f7eb3092a6
--- /dev/null
+++ b/test/unit/visual/cases/typography.js
@@ -0,0 +1,20 @@
+visualSuite('Typography', function() {
+  visualSuite('textFont() with default fonts', function() {
+    visualTest('With the default font', function (p5, screenshot) {
+      p5.createCanvas(50, 50);
+      p5.textSize(20);
+      p5.textAlign(p5.LEFT, p5.TOP);
+      p5.text('test', 0, 0);
+      screenshot();
+    });
+
+    visualTest('With the default monospace font', function (p5, screenshot) {
+      p5.createCanvas(50, 50);
+      p5.textSize(20);
+      p5.textFont('monospace');
+      p5.textAlign(p5.LEFT, p5.TOP);
+      p5.text('test', 0, 0);
+      screenshot();
+    });
+  });
+}, { focus: true });
diff --git a/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default font/000.png b/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default font/000.png
new file mode 100644
index 0000000000..2df2de7125
Binary files /dev/null and b/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default font/000.png differ
diff --git a/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default font/metadata.json b/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default font/metadata.json
new file mode 100644
index 0000000000..2d4bfe30da
--- /dev/null
+++ b/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default font/metadata.json	
@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}
\ No newline at end of file
diff --git a/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default monospace font/000.png b/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default monospace font/000.png
new file mode 100644
index 0000000000..a30e8a60b5
Binary files /dev/null and b/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default monospace font/000.png differ
diff --git a/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default monospace font/metadata.json b/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default monospace font/metadata.json
new file mode 100644
index 0000000000..2d4bfe30da
--- /dev/null
+++ b/test/unit/visual/screenshots/Typography/textFont() with default fonts/With the default monospace font/metadata.json	
@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}
\ No newline at end of file
diff --git a/test/visual/visualTestList.js b/test/visual/visualTestList.js
index 7a008a20ef..f52f971180 100644
--- a/test/visual/visualTestList.js
+++ b/test/visual/visualTestList.js
@@ -1,5 +1,5 @@
 // List all visual test files here that should be manually run
-const visualTestList = ['webgl'];
+const visualTestList = ['webgl', 'typography'];
 
 for (const file of visualTestList) {
   document.write(