diff --git a/experimental/canvaskit/canvaskit/example.html b/experimental/canvaskit/canvaskit/example.html
index 85b9211..7c8416d 100644
--- a/experimental/canvaskit/canvaskit/example.html
+++ b/experimental/canvaskit/canvaskit/example.html
@@ -426,25 +426,43 @@
                           realCanvas._img = bitmap;
                         });
 
+    let realFontLoaded = new FontFace('Bungee', 'url(/tests/assets/Bungee-Regular.ttf)', {
+      'family': 'Bungee',
+      'style': 'normal',
+      'weight': '400',
+    }).load().then((font) => {
+      document.fonts.add(font);
+    });
 
-    Promise.all([realPromise, skPromise]).then(() => {
+    let skFontLoaded = fetch('/tests/assets/Bungee-Regular.ttf').then(
+                             (response) => response.arrayBuffer()).then(
+                             (buffer) => {
+                                // loadFont is synchronous
+                                skcanvas.loadFont(buffer, {
+                                  'family': 'Bungee',
+                                  'style': 'normal',
+                                  'weight': '400',
+                                });
+                              });
+
+    Promise.all([realPromise, skPromise, realFontLoaded, skFontLoaded]).then(() => {
       for (let canvas of [skcanvas, realCanvas]) {
         let ctx = canvas.getContext('2d');
         ctx.fillStyle = '#EEE';
         ctx.fillRect(0, 0, 300, 300);
         ctx.fillStyle = 'black';
-        ctx.font = '30px Impact'
+        ctx.font = '26px Bungee';
         ctx.rotate(.1);
         let text = ctx.measureText('Awesome');
-        ctx.fillText('Awesome ', 50, 100);
-        ctx.strokeText('Groovy!', 60+text.width, 100);
+        ctx.fillText('Awesome ', 25, 100);
+        ctx.strokeText('Groovy!', 35+text.width, 100);
 
         // Draw line under Awesome
         ctx.strokeStyle = 'rgba(125,0,0,0.5)';
         ctx.beginPath();
         ctx.lineWidth = 6;
-        ctx.lineTo(50, 105);
-        ctx.lineTo(50 + text.width, 105);
+        ctx.moveTo(25, 105);
+        ctx.lineTo(25 + text.width, 105);
         ctx.stroke();
 
         // squished vertically
diff --git a/experimental/canvaskit/externs.js b/experimental/canvaskit/externs.js
index 57a4306..56d2669 100644
--- a/experimental/canvaskit/externs.js
+++ b/experimental/canvaskit/externs.js
@@ -446,6 +446,7 @@
 HTMLCanvas.prototype.decodeImage = function() {};
 HTMLCanvas.prototype.dispose = function() {};
 HTMLCanvas.prototype.getContext = function() {};
+HTMLCanvas.prototype.loadFont = function() {};
 HTMLCanvas.prototype.toDataURL = function() {};
 
 var CanvasRenderingContext2D = {};
diff --git a/experimental/canvaskit/htmlcanvas/canvas2dcontext.js b/experimental/canvaskit/htmlcanvas/canvas2dcontext.js
index dc2856d..5a07152 100644
--- a/experimental/canvaskit/htmlcanvas/canvas2dcontext.js
+++ b/experimental/canvaskit/htmlcanvas/canvas2dcontext.js
@@ -6,6 +6,9 @@
   this._paint.setStrokeMiter(10);
   this._paint.setStrokeCap(CanvasKit.StrokeCap.Butt);
   this._paint.setStrokeJoin(CanvasKit.StrokeJoin.Miter);
+  this._paint.setTextSize(10);
+  this._paint.setTypeface(null);
+  this._fontString = '10px monospace';
 
   this._strokeStyle    = CanvasKit.BLACK;
   this._fillStyle      = CanvasKit.BLACK;
@@ -22,6 +25,7 @@
   this._imageFilterQuality = CanvasKit.FilterQuality.Low;
   this._imageSmoothingEnabled = true;
 
+
   this._paint.setStrokeWidth(this._strokeWidth);
   this._paint.setBlendMode(this._globalCompositeOperation);
 
@@ -90,14 +94,19 @@
 
   Object.defineProperty(this, 'font', {
     enumerable: true,
-    get: function(newStyle) {
-      // TODO generate this
-      return '10px sans-serif';
+    get: function() {
+      return this._fontString;
     },
-    set: function(newStyle) {
-      var size = parseFontSize(newStyle);
-      // TODO(kjlubick) styles, font name
-      this._paint.setTextSize(size);
+    set: function(newFont) {
+      var tf = getTypeface(newFont);
+      if (tf) {
+        // tf is a "dict" according to closure, that is, the field
+        // names are not minified. Thus, we need to access it via
+        // bracket notation to tell closure not to minify these names.
+        this._paint.setTextSize(tf['sizePx']);
+        this._paint.setTypeface(tf['typeface']);
+        this._fontString = newFont;
+      }
     }
   });
 
@@ -926,26 +935,25 @@
       CanvasKit.SkMatrix.invert(newState.ctm)
     );
     this._currentPath.transform(combined);
+    this._paint.delete();
+    this._paint = newState.paint;
 
     this._lineDashList = newState.ldl;
     this._strokeWidth = newState.sw;
-    this._paint.setStrokeWidth(this._strokeWidth);
     this._strokeStyle = newState.ss;
     this._fillStyle = newState.fs;
-    this._paint.setStrokeCap(newState.cap);
-    this._paint.setStrokeJoin(newState.jn);
-    this._paint.setStrokeMiter(newState.mtr);
     this._shadowOffsetX = newState.sox;
     this._shadowOffsetY = newState.soy;
     this._shadowBlur = newState.sb;
     this._shadowColor = newState.shc;
     this._globalAlpha = newState.ga;
     this._globalCompositeOperation = newState.gco;
-    this._paint.setBlendMode(this._globalCompositeOperation);
     this._lineDashOffset = newState.ldo;
     this._imageSmoothingEnabled = newState.ise;
     this._imageFilterQuality = newState.isq;
-    //TODO: font, textAlign, textBaseline, direction
+    this._fontString = newState.fontstr;
+
+    //TODO: textAlign, textBaseline
 
     // restores the clip and ctm
     this._canvas.restore();
@@ -980,24 +988,23 @@
     }
 
     this._canvasStateStack.push({
-      ctm:  this._currentTransform.slice(),
-      ldl: this._lineDashList.slice(),
-      sw:  this._strokeWidth,
-      ss:  ss,
-      fs:  fs,
-      cap: this._paint.getStrokeCap(),
-      jn:  this._paint.getStrokeJoin(),
-      mtr: this._paint.getStrokeMiter(),
-      sox: this._shadowOffsetX,
-      soy: this._shadowOffsetY,
-      sb:  this._shadowBlur,
-      shc: this._shadowColor,
-      ga:  this._globalAlpha,
-      ldo: this._lineDashOffset,
-      gco: this._globalCompositeOperation,
-      ise: this._imageSmoothingEnabled,
-      isq: this._imageFilterQuality,
-      //TODO: font, textAlign, textBaseline, direction
+      ctm:     this._currentTransform.slice(),
+      ldl:     this._lineDashList.slice(),
+      sw:      this._strokeWidth,
+      ss:      ss,
+      fs:      fs,
+      sox:     this._shadowOffsetX,
+      soy:     this._shadowOffsetY,
+      sb:      this._shadowBlur,
+      shc:     this._shadowColor,
+      ga:      this._globalAlpha,
+      ldo:     this._lineDashOffset,
+      gco:     this._globalCompositeOperation,
+      ise:     this._imageSmoothingEnabled,
+      isq:     this._imageFilterQuality,
+      paint:   this._paint.copy(),
+      fontstr: this._fontString,
+      //TODO: textAlign, textBaseline
     });
     // Saves the clip
     this._canvas.save();
diff --git a/experimental/canvaskit/htmlcanvas/font.js b/experimental/canvaskit/htmlcanvas/font.js
index 549208d..340bd00 100644
--- a/experimental/canvaskit/htmlcanvas/font.js
+++ b/experimental/canvaskit/htmlcanvas/font.js
@@ -1,38 +1,113 @@
 // Functions dealing with parsing/stringifying fonts go here.
+var fontStringRegex = new RegExp(
+  '(italic|oblique|normal|)\\s*' +              // style
+  '(small-caps|normal|)\\s*' +                  // variant
+  '(bold|bolder|lighter|[1-9]00|normal|)\\s*' + // weight
+  '([\\d\\.]+)' +                               // size
+  '(px|pt|pc|in|cm|mm|%|em|ex|ch|rem|q)' +      // unit
+  // line-height is ignored here, as per the spec
+  '(.+)'                                        // family
+  );
 
-var units = 'px|pt|pc|in|cm|mm|%|em|ex|ch|rem|q';
-var fontSizeRegex = new RegExp('([\\d\\.]+)(' + units + ')');
+function stripWhitespace(str) {
+  return str.replace(/^\s+|\s+$/, '');
+}
+
 var defaultHeight = 16;
 // Based off of node-canvas's parseFont
 // returns font size in px, which represents the em width.
-function parseFontSize(fontStr) {
-  // This is naive and doesn't account for line-height yet
-  // (but neither does node-canvas's?)
-  var fontSize = fontSizeRegex.exec(fontStr);
-  if (!fontSize) {
-    SkDebug('Could not parse font size' + fontStr);
-    return 16;
+function parseFontString(fontStr) {
+
+  var font = fontStringRegex.exec(fontStr);
+  if (!font) {
+    SkDebug('Invalid font string ' + fontStr);
+    return null;
   }
-  var size = parseFloat(fontSize[1]);
-  var unit = fontSize[2];
+
+  var size = parseFloat(font[4]);
+  var sizePx = defaultHeight;
+  var unit = font[5];
   switch (unit) {
-    case 'pt':
     case 'em':
     case 'rem':
-      return size * 4/3;
+      sizePx = size * defaultHeight;
+      break;
+    case 'pt':
+      sizePx = size * 4/3;
+      break;
     case 'px':
-      return size;
+      sizePx = size;
+      break;
     case 'pc':
-      return size * 16;
+      sizePx = size * defaultHeight;
+      break;
     case 'in':
-      return size * 96;
+      sizePx = size * 96;
+      break;
     case 'cm':
-      return size * 96.0 / 2.54;
+      sizePx = size * 96.0 / 2.54;
+      break;
     case 'mm':
-      return size * (96.0 / 25.4);
+      sizePx = size * (96.0 / 25.4);
+      break;
     case 'q': // quarter millimeters
-      return size * (96.0 / 25.4 / 4);
+      sizePx = size * (96.0 / 25.4 / 4);
+      break;
     case '%':
-      return size * (defaultHeight / 75);
+      sizePx = size * (defaultHeight / 75);
+      break;
   }
-}
\ No newline at end of file
+  return {
+    'style':   font[1],
+    'variant': font[2],
+    'weight':  font[3],
+    'sizePx':  sizePx,
+    'family':  font[6].trim()
+  };
+}
+
+function getTypeface(fontstr) {
+  var descriptors = parseFontString(fontstr);
+  var typeface = getFromFontCache(descriptors);
+  descriptors['typeface'] = typeface;
+  return descriptors;
+}
+
+// null means use the default typeface (which is currently NotoMono)
+var fontCache = {
+  'Noto Mono': {
+    '*': null, // is used if we have this font family, but not the right style/variant/weight
+  },
+  'monospace': {
+    '*': null,
+  }
+};
+
+// descriptors is like https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace
+// The ones currently supported are family, style, variant, weight.
+function addToFontCache(typeface, descriptors) {
+  var key = (descriptors['style']   || 'normal') + '|' +
+            (descriptors['variant'] || 'normal') + '|' +
+            (descriptors['weight']  || 'normal');
+  var fam = descriptors['family'];
+  if (!fontCache[fam]) {
+    // preload with a fallback to this typeface
+    fontCache[fam] = {
+      '*': typeface,
+    };
+  }
+  fontCache[fam][key] = typeface;
+}
+
+function getFromFontCache(descriptors) {
+  var key = (descriptors['style']   || 'normal') + '|' +
+            (descriptors['variant'] || 'normal') + '|' +
+            (descriptors['weight']  || 'normal');
+  var fam = descriptors['family'];
+  if (!fontCache[fam]) {
+    return null;
+  }
+  return fontCache[fam][key] || fontCache[fam]['*'];
+}
+
+CanvasKit._testing['parseFontString'] = parseFontString;
\ No newline at end of file
diff --git a/experimental/canvaskit/htmlcanvas/htmlcanvas.js b/experimental/canvaskit/htmlcanvas/htmlcanvas.js
index b756b26..6f118e5 100644
--- a/experimental/canvaskit/htmlcanvas/htmlcanvas.js
+++ b/experimental/canvaskit/htmlcanvas/htmlcanvas.js
@@ -9,7 +9,8 @@
 function HTMLCanvas(skSurface) {
   this._surface = skSurface;
   this._context = new CanvasRenderingContext2D(skSurface.getCanvas());
-  this._imgs = [];
+  this._toCleanup = [];
+  this._fontmgr = CanvasKit.SkFontMgr.RefDefault();
 
   // Data is either an ArrayBuffer, a TypedArray, or a Node Buffer
   this.decodeImage = function(data) {
@@ -17,10 +18,20 @@
     if (!img) {
       throw 'Invalid input';
     }
-    this._imgs.push(img);
+    this._toCleanup.push(img);
     return img;
   }
 
+  this.loadFont = function(buffer, descriptors) {
+    var newFont = this._fontmgr.MakeTypefaceFromData(buffer);
+    if (!newFont) {
+      SkDebug('font could not be processed', descriptors);
+      return null;
+    }
+    this._toCleanup.push(newFont);
+    addToFontCache(newFont, descriptors);
+  }
+
   // A normal <canvas> requires that clients call getContext
   this.getContext = function(type) {
     if (type === '2d') {
@@ -56,7 +67,7 @@
 
   this.dispose = function() {
     this._context._dispose();
-    this._imgs.forEach(function(i) {
+    this._toCleanup.forEach(function(i) {
       i.delete();
     });
     this._surface.dispose();
diff --git a/experimental/canvaskit/interface.js b/experimental/canvaskit/interface.js
index 704721a..fe1252c 100644
--- a/experimental/canvaskit/interface.js
+++ b/experimental/canvaskit/interface.js
@@ -412,16 +412,9 @@
       if (!font) {
         SkDebug('Could not decode font data');
         // We do not need to free the data since the C++ will do that for us
-        // on a failed decode (at least, it appears to).
+        // when the font is deleted (or fails to decode);
         return null;
       }
-      // We cannot free this data until after the font stops being used
-      // (otherwise nothing draws)
-      var realDelete = font.delete.bind(font);
-      font.delete = function() {
-        CanvasKit._free(fptr);
-        realDelete();
-      }
       return font;
     }
 
diff --git a/experimental/canvaskit/tests/assets/Bungee-Regular.ttf b/experimental/canvaskit/tests/assets/Bungee-Regular.ttf
new file mode 100644
index 0000000..3229ee2
--- /dev/null
+++ b/experimental/canvaskit/tests/assets/Bungee-Regular.ttf
Binary files differ
diff --git a/experimental/canvaskit/tests/canvas2d.spec.js b/experimental/canvaskit/tests/canvas2d.spec.js
index 82c8371..002ccad 100644
--- a/experimental/canvaskit/tests/canvas2d.spec.js
+++ b/experimental/canvaskit/tests/canvas2d.spec.js
@@ -129,6 +129,146 @@
         });
     }); // end describe('color string parsing')
 
+    describe('fonts', function() {
+        it('can parse font sizes', function(done) {
+            LoadCanvasKit.then(catchException(done, () => {
+                const parseFontString = CanvasKit._testing.parseFontString;
+
+                const tests = [{
+                        'input': '10px monospace',
+                        'output': {
+                            'style': '',
+                            'variant': '',
+                            'weight': '',
+                            'sizePx': 10,
+                            'family': 'monospace',
+                        }
+                    },
+                    {
+                        'input': '15pt Arial',
+                        'output': {
+                            'style': '',
+                            'variant': '',
+                            'weight': '',
+                            'sizePx': 20,
+                            'family': 'Arial',
+                        }
+                    },
+                    {
+                        'input': '1.5in Arial, san-serif ',
+                        'output': {
+                            'style': '',
+                            'variant': '',
+                            'weight': '',
+                            'sizePx': 144,
+                            'family': 'Arial, san-serif',
+                        }
+                    },
+                    {
+                        'input': '1.5em SuperFont',
+                        'output': {
+                            'style': '',
+                            'variant': '',
+                            'weight': '',
+                            'sizePx': 24,
+                            'family': 'SuperFont',
+                        }
+                    },
+                ];
+
+                for (let i = 0; i < tests.length; i++) {
+                    expect(parseFontString(tests[i].input)).toEqual(tests[i].output);
+                }
+
+                done();
+            }));
+        });
+
+        it('can parse font attributes', function(done) {
+            LoadCanvasKit.then(catchException(done, () => {
+                const parseFontString = CanvasKit._testing.parseFontString;
+
+                const tests = [{
+                        'input': 'bold 10px monospace',
+                        'output': {
+                            'style': '',
+                            'variant': '',
+                            'weight': 'bold',
+                            'sizePx': 10,
+                            'family': 'monospace',
+                        }
+                    },
+                    {
+                        'input': 'italic bold 10px monospace',
+                        'output': {
+                            'style': 'italic',
+                            'variant': '',
+                            'weight': 'bold',
+                            'sizePx': 10,
+                            'family': 'monospace',
+                        }
+                    },
+                    {
+                        'input': 'italic small-caps bold 10px monospace',
+                        'output': {
+                            'style': 'italic',
+                            'variant': 'small-caps',
+                            'weight': 'bold',
+                            'sizePx': 10,
+                            'family': 'monospace',
+                        }
+                    },
+                    {
+                        'input': 'small-caps bold 10px monospace',
+                        'output': {
+                            'style': '',
+                            'variant': 'small-caps',
+                            'weight': 'bold',
+                            'sizePx': 10,
+                            'family': 'monospace',
+                        }
+                    },
+                    {
+                        'input': 'italic 10px monospace',
+                        'output': {
+                            'style': 'italic',
+                            'variant': '',
+                            'weight': '',
+                            'sizePx': 10,
+                            'family': 'monospace',
+                        }
+                    },
+                    {
+                        'input': 'small-caps 10px monospace',
+                        'output': {
+                            'style': '',
+                            'variant': 'small-caps',
+                            'weight': '',
+                            'sizePx': 10,
+                            'family': 'monospace',
+                        }
+                    },
+                    {
+                        'input': 'normal bold 10px monospace',
+                        'output': {
+                            'style': 'normal',
+                            'variant': '',
+                            'weight': 'bold',
+                            'sizePx': 10,
+                            'family': 'monospace',
+                        }
+                    },
+                ];
+
+                for (let i = 0; i < tests.length; i++) {
+                    expect(parseFontString(tests[i].input)).toEqual(tests[i].output);
+                }
+
+                done();
+            }));
+        });
+    });
+
     function multipleCanvasTest(testname, done, test) {
         const skcanvas = CanvasKit.MakeCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
         skcanvas._config = 'software_canvas';
@@ -621,6 +761,52 @@
             }));
         });
 
+        it('can load custom fonts', function(done) {
+            let realFontLoaded = new FontFace('BungeeNonSystem', 'url(/assets/Bungee-Regular.ttf)', {
+                'family': 'BungeeNonSystem', //Make sure the canvas does not use the system font
+                'style': 'normal',
+                'weight': '400',
+            }).load().then((font) => {
+                document.fonts.add(font);
+            });
+
+            let fontBuffer = null;
+
+            let skFontLoaded = fetch('/assets/Bungee-Regular.ttf').then(
+                (response) => response.arrayBuffer()).then(
+                (buffer) => {
+                    fontBuffer = buffer;
+                });
+
+            LoadCanvasKit.then(catchException(done, () => {
+                Promise.all([realFontLoaded, skFontLoaded]).then(() => {
+                    multipleCanvasTest('custom_font', done, (canvas) => {
+                        if (canvas.loadFont) {
+                            canvas.loadFont(fontBuffer, {
+                                'family': 'BungeeNonSystem',
+                                'style': 'normal',
+                                'weight': '400',
+                            });
+                        }
+                        let ctx = canvas.getContext('2d');
+
+                        ctx.font = '20px monospace';
+                        ctx.fillText('20 px monospace', 10, 30);
+
+                        ctx.font = '2.0em BungeeNonSystem';
+                        ctx.fillText('2.0em Bungee filled', 10, 80);
+                        ctx.strokeText('2.0em Bungee stroked', 10, 130);
+
+                        ctx.font = '40pt monospace';
+                        ctx.strokeText('40pt monospace', 10, 200);
+
+                        // bold wasn't defined, so should fallback to just the 400 weight
+                        ctx.font = 'bold 45px BungeeNonSystem';
+                        ctx.fillText('45px Bungee filled', 10, 260);
+                    });
+                });
+            }));
+        });
         it('can read default properties', function(done) {
             LoadCanvasKit.then(catchException(done, () => {
                 const skcanvas = CanvasKit.MakeCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
@@ -630,6 +816,9 @@
 
                 const skcontext = skcanvas.getContext('2d');
                 const realContext = realCanvas.getContext('2d');
+                // The skia canvas only comes with a monospace font by default
+                // Set the html canvas to be monospace too.
+                realContext.font = '10px monospace';
 
                 const toTest = ['font', 'lineWidth', 'strokeStyle', 'lineCap',
                                 'lineJoin', 'miterLimit', 'shadowOffsetY',
diff --git a/site/user/modules/canvaskit.md b/site/user/modules/canvaskit.md
index 09d831e..5246413 100644
--- a/site/user/modules/canvaskit.md
+++ b/site/user/modules/canvaskit.md
@@ -55,7 +55,7 @@
   <figure>
     <canvas id=patheffect width=400 height=400></canvas>
     <figcaption>
-      <a href="https://jsfiddle.skia.org/canvaskit/bb98ad306a0c826b6dc8e8b8f709fca75fee95210c529679def945f0be7ed90c"
+      <a href="https://jsfiddle.skia.org/canvaskit/28004d8841e7e497013263598241a3c1edc21dc1cf87a679abba307f39fa5fe6"
           target=_blank rel=noopener>
         Star JSFiddle</a>
     </figcaption>