Styles in react-pdf showing abnormal behaviour

Question

I'm trying to use italic styling in react-pdf.

Everything works well until I use font-style: italic;.

Is there another way style text as Italic in react-pdf ?

const Italic = styled.Text`
  font-size: 12px;
  lineheight: 20px;
  text-align: left;
  font-family: "Roboto Condensed";
  letter-spacing: 0.5px;
  font-style: italic;//problem is with this line
  font-weight:400;
`;

It is giving me the error:

Uncaught (in promise) Error: Could not resolve font for undefined, fontWeight 400

try putting font-size, lineheight and letter-spacing in double quotes (font-size: "12px") or single quotes etc. Though the suffix px is not needed. React will automatically append a “px” suffix to certain numeric inline style properties. If you want to use units other than “px”, specify the value as a string with the desired unit. — IVAN PAUL, Mar 16 '20 at 11:53
Apologies forgot, to add that font-style : "italic" should also be in double or single quotes. https://stackoverflow.com/a/50556938/6033636 refer to this answer for more — IVAN PAUL, Mar 16 '20 at 12:04

score 6 · Answer 1 · answered Jun 09 '20 at 15:14

6

When you register your fonts, you need to make sure to include a variant for each fontStyle you wish to use. For example:

Font.register({
  family: 'Roboto',
  fonts: [
    { src: '<path-to-normal-font-variant>' },
    { src: '<path-to-italic-font-variant>', fontStyle: 'italic' },
    ...
  ]
});

answered Jun 09 '20 at 15:14

Tom

104
1
4

Thank you, Tom. This worked for me and saved me time. – natterstefan Aug 05 '21 at 08:31

score 2 · Answer 2 · answered Mar 16 '20 at 12:01

const Italic = styled.Text`
  font-size: "12px";
  lineheight: "20px";
  text-align: left;
  font-family: "Roboto Condensed";
  letter-spacing: "0.5px";
  font-style: "italic";//problem is with this line
  font-weight:400;
`;

where ever you are suffixing px needs to be in either single or double quotes and font-style: value(italic) need to be in double quotes as well.

Styles in react-pdf showing abnormal behaviour

2 Answers2