Provides right fallback fonts for text layer

src/canvas.js

@@ -596,8 +596,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
                                  (fontObj.bold ? 'bold' : 'normal');
 
       var italic = fontObj.italic ? 'italic' : 'normal';
-      var serif = fontObj.isSerifFont ? 'serif' : 'sans-serif';
-      var typeface = '"' + name + '", ' + serif;
+      var typeface = '"' + name + '", ' + fontObj.fallbackName;
 
       // Some font backends cannot handle fonts below certain size.
       // Keeping the font at minimal size and using the fontSizeScale to change
@@ -792,7 +791,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       }
 
       if (textSelection)
-        this.textLayer.appendText(text, font.loadedName, fontSize);
+        this.textLayer.appendText(text, font.fallbackName, fontSize);
 
       return text;
     },
@@ -856,7 +855,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       }
 
       if (textSelection)
-        this.textLayer.appendText(text, font.loadedName, fontSize);
+        this.textLayer.appendText(text, font.fallbackName, fontSize);
     },
     nextLineShowText: function CanvasGraphics_nextLineShowText(text) {
       this.nextLine();

src/fonts.js

@@ -1522,17 +1522,13 @@ var Font = (function FontClosure() {
     names = names.split(/[-,_]/g)[0];
     this.isSerifFont = !!(properties.flags & FontFlags.Serif);
     this.isSymbolicFont = !!(properties.flags & FontFlags.Symbolic);
+    this.isMonospace = !!(properties.flags & FontFlags.FixedPitch);
 
     var type = properties.type;
     this.type = type;
 
-    // If the font is to be ignored, register it like an already loaded font
-    // to avoid the cost of waiting for it be be loaded by the platform.
-    if (properties.ignore) {
-      this.loadedName = this.isSerifFont ? 'serif' : 'sans-serif';
-      this.loading = false;
-      return;
-    }
+    this.fallbackName = this.isMonospace ? 'monospace' :
+                        this.isSerifFont ? 'serif' : 'sans-serif';
 
     this.differences = properties.differences;
     this.widths = properties.widths;

test/driver.js

@@ -181,7 +181,7 @@ SimpleTextLayerBuilder.prototype = {
     ctx.fill();
 
     var textContent = bidi(text, -1);
-    ctx.font = fontHeight + 'px sans-serif';
+    ctx.font = fontHeight + 'px ' + fontName;
     ctx.fillStyle = 'black';
     ctx.fillText(textContent, text.geom.x, text.geom.y);
   }

web/viewer.js

@@ -1846,7 +1846,7 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) {
       var textDiv = textDivs.shift();
       textLayerDiv.appendChild(textDiv);
 
-      ctx.font = textDiv.style.fontSize + ' sans-serif';
+      ctx.font = textDiv.style.fontSize + ' ' + textDiv.style.fontFamily;
       var width = ctx.measureText(textDiv.textContent).width;
 
       if (width > 0) {
@@ -1888,9 +1888,9 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) {
     // vScale and hScale already contain the scaling to pixel units
     var fontHeight = fontSize * text.geom.vScale;
     textDiv.dataset.canvasWidth = text.canvasWidth * text.geom.hScale;
-    textDiv.dataset.fontName = fontName;
 
     textDiv.style.fontSize = fontHeight + 'px';
+    textDiv.style.fontFamily = fontName;
     textDiv.style.left = text.geom.x + 'px';
     textDiv.style.top = (text.geom.y - fontHeight) + 'px';
     textDiv.textContent = PDFJS.bidi(text, -1);