Add font-weight and font-style support

[diegomura]

What this PR do

This adds the ability to setup font-styles and font-weights when registering fonts:

Font.register(`http://localhost:3000/Roboto-Regular.ttf`, {
  family: 'Roboto'
})

Font.register(`http://localhost:3000/Roboto-Bold.ttf`, {
  family: 'Roboto',
  fontWeight: 'bold'
})

Font.register(`http://localhost:3000/Roboto-Italic.ttf`, {
  family: 'Roboto',
  fontWeight: 'normal',
  fontStyle: 'italic'
})

Font.register(`http://localhost:3000/Roboto-BoldItalic.ttf`, {
  family: 'Roboto',
  fontWeight: 'bold',
  fontStyle: 'italic'
})

When rendering, react-pdf will choose the appropriate font in the same way the web does.

"Bulk" font loading

Since we now support referring to different font files by using the same fontFamily value, IMO would be cool to be able to load one fontFamily in one register call:

Font.register({
  family: 'Roboto',
  fonts: [
    {  
      src: 'http://localhost:3000/Roboto-Regular.ttf',
      fontWeight: 'normal', // Default, does not have to be specified
      fontStyle: 'normal',  // Default, does not have to be specified
    },
    {  
      src: 'http://localhost:3000/Roboto-Bold.ttf',
      fontWeight: 'bold' // Also accepts numeric values, ex. 700
    },
    {  
      src: 'http://localhost:3000/Roboto-Italic.ttf',
      fontStyle: 'italic'
    },
    {  
      src: 'http://localhost:3000/Roboto-BoldItalic.ttf',
      fontStyle: 'italic',
      fontWeight: 'bold',
    },
  ]
})

Other options such as method, headers and body that we currently support should still work for each font.

Change register API

We currently pass the font src in the first argument to Font.register, and all other options into the second. To achieve the latter point (and if we want to support CSS @font-face attribute in the future) it would be cool to have the API like this:

Font.register({
  src: '...',
  fontStyle: 'normal',
  fontWeight: 'bold'
})

We should still support the current API, by showing a deprecated warning

TODO

• Add font-weight and font-style support
• Bulk loading
• Change register API
• Update docs
• Update REPL example
• Update typings
• Check typings correctness
• Fix old tests
• Add new tests

@DuncanMacWeb inputs?

Fixes #402

[DuncanMacWeb]

@diegomura Thanks so much for doing this! I’ll look through it tomorrow and let you know my thoughts. (Sorry, I wanted to focus on pull 538 these last couple of days and get it done.)

[diegomura]

Thank you! I'll review also your PR tomorrow 😄
I'm currently working on those last points so we can maybe merge this soon. I'll specially appreciate if you can review the typings, since it's a field that I don't have that much experience haha

[DuncanMacWeb]

In summary, LGTM! I like how you’ve implemented this. I’ve used TypeScript before but I’m not currently using it, so I would like to check your syntax with a TS linter. But without checking, your typings look good.

I think there may be an opportunity to optimise data usage by only downloading registered fonts once they are actually used, but this can go in separately somehow.

[diegomura]

Thank you @DuncanMacWeb !!
Your feedback is REALLY appreciated.

I think there may be an opportunity to optimise data usage by only downloading registered fonts once they are actually used, but this can go in separately somehow.

This actually happens now. We don't download the font when it get's registered, but when it's loaded. This method get's called before rendering the doc only for the font descriptors present on the document

What would be cool in the future is creating a font subset only with the used glyphs, but that's something that should be implemented in textkit

[diegomura]

Btw. is there an easy way of running a TS linter?

[DuncanMacWeb]

@diegomura heads up, there appears to be a bug in this PR that causes fonts to be re-downloaded multiple times. Have you also observed this?

[diegomura]

Oops. No! I'll take a look at it asap. Good thing it's not published in npm yet

[diegomura]

@DuncanMacWeb fixed in #547
Sorry and thanks for reporting this!!
Have you been trying the new font loading support? Besides this, how it has been working?
Merging this today and maybe its time to publish these changes

[DuncanMacWeb]

We haven’t tried it yet — will report back!