Adding font weight support

Hi there,

I’d like to add font weight support to react-pdf and I was hoping a contributor could recommend an efficient strategy or inform me of any existing work before I dive in.

Cheers Luke

[diegomura]

Hey. Font weight is not as simple as it might look at first glance. Currently the way to support different font weights it’s by loading different font files per each font-weight needed, and styling the text based on your needs.

Font.register(src1, { fontFamily: 'Roboto-Regular' }); 
Font.register(src2, { fontFamily: 'Roboto-Bold' });

const styles = StyleSheet.create({
  title: { fontFamily: 'Roboto-Bold' },
  paragraph: { fontFamily: 'Roboto-Regular' },
})

Or you can also choose one of the default fonts shipped with the lib:

  'Courier',
  'Courier-Bold',
  'Courier-Oblique',
  'Helvetica',
  'Helvetica-Bold',
  'Helvetica-Oblique',
  'Times-Roman',
  'Times-Bold',
  'Times-Italic',

The API could change, but you still have to provide different files and change the font-family for each chunk you want styled differently. I know it’s not ideal, but it’s the only way

[diegomura]

Thanks for pushing this feature forward. Here’s what I think:

I always tried to be as close to the web APIs as possible. It’s great to take advantage of these, since most of people already know them. So implementing the font-face API as @DuncanMacWeb described it’s aligned to that. However, I’m not sure if adding the unicode-range option. Didn’t estimated how hard would be to do it (I refactored the entire textkit solution, in order to be more easy to just add stuff), but the font-substitution engine implemented in react-pdf already fallbacks into another font if the given one does not have a glyph for a particular character. So struggling with unicode ranges seems making the api more complex without any visible enhance.

I think @agarant solution really makes a change though. Because would enable to handle the styling of a text as you would do it in the web (using the font-weight attribute), instead of having to set different font-families. However, I don’t think that adding the X-Light|Medium|Bold|Whatever is even necessary. It creates an arbitrary pattern that font families names should follow. And also with just family and weight we have all information to switch between font files to each particular case. It’s also necessary to fallback to the closest font in case the provided font-weight is no explicitly defined.

In conclusion, I think we can use some kind of mixture of both solutions:

Font.register(`${public_url}/fonts/Roboto-Light.ttf`, {
  family: 'Roboto',
  weight: '100,200,300', // or [100, 200, 300]
});
Font.register(`${public_url}/fonts/Roboto-Medium.ttf`, {
  family: 'Roboto',
  weight: '400,500',
});

Internally we can also map values such as bold, light, etc to the corresponding number representation.

What do you guys think?