Fix fonts loading (#195)

packages/react-pdf/src/elements/Document.js

@@ -78,6 +78,7 @@ class Document {
     await this.renderChildren();
 
     this.root.end();
+    Font.reset();
   }
 }
 

packages/react-pdf/src/font/index.js

@@ -8,6 +8,7 @@ const register = (src, { family, ...otherOptions }) => {
   fonts[family] = {
     src,
     loaded: false,
+    data: null,
     ...otherOptions,
   };
 };
@@ -17,12 +18,17 @@ const getRegisteredFonts = () => Object.keys(fonts);
 const load = async (fontFamily, doc) => {
   const font = fonts[fontFamily];
 
+  // We cache the font to avoid fetching it many time
+  if (font && !font.data) {
+    font.data = isUrl(font.src) ? await fetchFont(font.src) : font.src;
+  }
+
+  // If the font wasn't added to the document yet (aka. loaded), we do.
+  // This prevents calling `registerFont` many times for the same font.
+  // Fonts loaded state will be resetted after document is closed.
   if (font && !font.loaded) {
     font.loaded = true;
-
-    const src = isUrl(font.src) ? await fetchFont(font.src) : font.src;
-
-    doc.registerFont(fontFamily, src);
+    doc.registerFont(fontFamily, font.data);
   }
 
   if (!font && !standardFonts.includes(fontFamily)) {
@@ -32,6 +38,14 @@ const load = async (fontFamily, doc) => {
   }
 };
 
+const reset = () => {
+  for (const font in fonts) {
+    if (fonts.hasOwnProperty(font)) {
+      fonts[font].loaded = false;
+    }
+  }
+};
+
 const clear = () => {
   fonts = {};
 };
@@ -41,4 +55,5 @@ export default {
   getRegisteredFonts,
   load,
   clear,
+  reset,
 };