Custom fonts cause the page to break and leak resources

OS: macOS Mojave 10.14.3 Beta

React-pdf version: v1.1.0

Description:

Applying a custom font in the browser seems to cause some sort of resources leak, ultimately preventing the document from rendering.

How to replicate issue including code snippet (if applies):

I put together a reproduction repo: https://github.com/puregarlic/react-pdf-repro

This is all the code needed to break it:

import React from 'react'
import { PDFViewer, Document, Font, Page, Text } from '@react-pdf/renderer'

// font included in the example repository
import PTSansCaption from './fonts/PT_Sans-Caption-Web-Regular.ttf'

Font.register(PTSansCaption, { family: 'PT Sans Caption' })

const App = () => (
  <PDFViewer width="100%" height="100%">
    <Document>
      <Page>
        {/* Removing the style prop fixes the page */}
        <Text style={{ fontFamily: 'PT Sans Caption' }}>Hello, world</Text>
      </Page>
    </Document>
  </PDFViewer>
)

export default App

[maxsbelt]

@baileysingleton I added example for concrete case when create-react-app is used to build assets with webpack and insert script to the page:

import Arial from './fonts/Arial.ttf'
// Arial variable be something like `/fonts/Arial.23nlk23l.ttf`

In such case you need to add host prefix so browser can determine how to download this font.

But if you import font inside Node application (without webpack loader) you can use relative path.

[baileysingleton]

@maxsbelt How come relative paths no longer work? Makes it a bit tough for production use, as urls work for development, but relative paths with Node would be the preferred use scenario.

Thanks!