fontWeight doesn't work #796

yellowBanano · 2019-12-18T14:06:31Z

Describe the bug
I tried to change the text style of a component with CSS property fontWeight.
Nothing has changed.
Use https://react-pdf.org/repl?example=font-register to check the accuracy, but repl won't launch.

To Reproduce
Steps to reproduce the behavior including code snippet (if applies):

Go to https://react-pdf.org/repl?example=font-register
See error

Expected behavior
Expected to see how font become bold

Desktop (please complete the following information):

OS: Ubuntu 19.04
Browser: Firefox 71.0
React-pdf version: 1.6.8

cympak01 · 2019-12-26T13:42:05Z

@yellowBanano fontWeight won't apply if you didn't register proper font.
Code below did the work:

Font.register({
family: 'Open Sans',
fonts: [
{ src: 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/open-sans-regular.ttf' },
{ src: 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/open-sans-600.ttf', fontWeight: 600 }
]
});

juby-gif · 2020-06-05T18:28:44Z

+1

bartmika · 2020-06-05T18:31:26Z

+1

mnowotnik · 2021-01-04T16:40:14Z

+1, Still doesn't work in 2.0.0-beta.18

workaround:
register font weight with mangled family name, e.g. Calibri-300

eyeamkd · 2021-04-12T08:59:40Z

i'm using the latest version and still facing this issue

diegomura · 2021-05-03T04:55:54Z

Fixed in latest commits!

ljmerza · 2022-09-06T18:39:16Z

this doesnt work even with the default fonts built in. are you saying i have to import all the bold fonts even for the default fonts built in?

Ahmad495 · 2022-12-21T12:48:56Z

This issue is still unresolved on the latest version.

casestudy · 2023-01-02T20:37:27Z

Any solution just yet? Still have the issue.

kiliancabrera · 2023-02-10T12:25:43Z

any solution?

mjbour · 2023-02-23T15:38:00Z

any solution?

Ahmad495 · 2023-03-30T06:46:09Z

I used this package here link to get font weight working. One more important thing we must have to register font family first.
const companyPara = <span style={{ fontFamily: 'Roboto', fontWeight: 'bold' }}>Your Text</span>; const companyParaHTML = ReactDOMServer.renderToStaticMarkup(companyPara);

after this use tag from react-pdf-html to render in pdf

<Html style={{ fontSize: 10 }}>{companyParaHTML}</Html>

ua-knight · 2023-08-29T10:02:08Z

I had the same issue. Thanks to all who commented. Following advices above, this was what worked for me:

First, run the register code somewhere central in the app.

Font.register({
  family: 'Open Sans',
  fonts: [
    { src: 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/open-sans-regular.ttf' },
    { src: 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/open-sans-600.ttf', fontWeight: 600 }
  ]
})

And then add the font family where font weight is used in the document pdf.

const styles = StyleSheet.create({
    title: { fontFamily: 'Open Sans', fontSize: 20, fontWeight: 600 }, // doesn't work without fontFamily
})

sebastianfdz · 2023-09-04T23:36:58Z

Like @ua-knight said above:

IT DOESN'T WORK if 'fontFamily' is not specified inside style tag.

Took me a while too.

ahmedibra28 · 2023-11-13T08:47:11Z

I had the same issue. Thanks to all who commented. Following advices above, this was what worked for me:

First, run the register code somewhere central in the app.
Font.register({
  family: 'Open Sans',
  fonts: [
    { src: 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/open-sans-regular.ttf' },
    { src: 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/open-sans-600.ttf', fontWeight: 600 }
  ]
})
And then add the font family where font weight is used in the document pdf.
const styles = StyleSheet.create({
    title: { fontFamily: 'Open Sans', fontSize: 20, fontWeight: 600 }, // doesn't work without fontFamily
})

It worked.
Thank you.

sychd · 2024-02-21T13:30:59Z

You can use the default fonts provided by the library without needing to register another font if they fit your needs. The default fonts are listed here: https://react-pdf.org/fonts

For example:

<Text style={{ fontFamily: 'Helvetica-Bold' }}>
    Welcome
</Text>

Umesh-Bhati · 2024-05-20T16:45:24Z

You can use the default fonts provided by the library without needing to register another font if they fit your needs. The default fonts are listed here: https://react-pdf.org/fonts

For example:
<Text style={{ fontFamily: 'Helvetica-Bold' }}>
    Welcome
</Text>

not working for me
My project is using next 14.1.4

Umesh-Bhati · 2024-05-20T16:47:43Z

someone find another solution because all the above-suggested solutions are not working yet

My project uses Nextjs 14.1.1 with Shadcn UI that uses remix UI

paystrup · 2024-05-29T09:37:40Z

+1

chetansgit · 2024-05-31T07:21:23Z

It was working before in version 14.0.3, but when I updated to the next version, it stopped working again. Even after reverting to the previous version, it still doesn't work

tgram-3D · 2024-06-06T20:42:14Z

Same deal here. Worked in 3.1.14 but not working in 3.4.4. Even the built-in fonts are not working at all.

Psarada84 · 2024-06-20T08:48:44Z

Same here.. I had to revert react-pdf/renderer to 3.2.2 from 3.4.4.

rodericktech · 2024-06-24T19:36:54Z

@Psarada84 Which version did you revert to? (Looks like 3.2.2 is not a release) - Hoping it might be a solution for me because I have tried versions from 3.1.2 up - on vanilla React 18.3 - and none of those I've tried so far have worked for me even with the 'Helvetica-Bold' built-in example shown above.

rodericktech · 2024-06-24T19:58:52Z

Never mind the above - I found a solution for this (using the default fonts at least) here - #2750 - putting in an override to revert @react-pdf/layout to 3.11.5. This works at least as far up as version 3.4.2 of the renderer for me.

stevec01 · 2024-08-07T14:03:28Z

HI I have tried all of the above and i cannot have a single word in bold within a sentence. Any Ideas, thanks

JacobWeisenburger · 2024-08-22T19:44:17Z

Has this been solved? Because I can't seem to figure out how to make some text bold.

MustehsanGhouri · 2024-08-27T01:37:43Z

Working Solution for Text Alignment and Wrapping in `@react-pdf/renderer`

This approach works effectively, allowing you to nest View components and manage text styles, alignment, and wrapping.

import React from "react";
import { Text, View, StyleSheet } from "@react-pdf/renderer";

const ExampleComponent = () => {
  const styles = StyleSheet.create({
    container: {
      flexDirection: "row",
      flexWrap: "wrap",
      alignItems: "center", // Aligns text vertically in the center
    },
    text: {
      margin: 6, // Handles spacing between words
      fontSize: 14,
      textAlign: "justify",
      color: "#000000",
      fontWeight: "normal",
      marginLeft: -3, // Adjust margin to align text correctly
    },
    textBold: {
      margin: 6, // Handles spacing between words
      fontSize: 14,
      textAlign: "justify",
      color: "#000000",
      fontWeight: "bold",
    },
  });

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello</Text>
      <Text style={styles.textBold}>World</Text>
      <Text style={styles.text}>. Again, I am not bold, WOW</Text>
    </View>
  );
};

export default ExampleComponent;


![issue](https://github.com/user-attachments/assets/7f3078df-9294-40c6-badd-a2a01fc647c1)

MustehsanGhouri · 2024-08-27T01:42:14Z

ivanbicalho · 2024-09-12T00:02:50Z

After checking multiple threads here the only way it worked for me was overriding the react-pdf/layout + using Times-Bold:

"dependencies": {
    "@react-pdf/renderer": "^3.4.4",
    ....
}

"overrides": {
    "@react-pdf/layout": "3.11.5"
}

const styles = StyleSheet.create({
    bold: {
      fontFamily: "Times-Bold",
    },
    ....

vrmartins mentioned this issue Dec 29, 2019

FontFamily is not working #807

Closed

diegomura added the bug label Apr 15, 2021

diegomura closed this as completed May 3, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fontWeight doesn't work #796

fontWeight doesn't work #796

yellowBanano commented Dec 18, 2019

cympak01 commented Dec 26, 2019 •

edited

Loading

juby-gif commented Jun 5, 2020

bartmika commented Jun 5, 2020

mnowotnik commented Jan 4, 2021 •

edited

Loading

eyeamkd commented Apr 12, 2021

diegomura commented May 3, 2021

ljmerza commented Sep 6, 2022

Ahmad495 commented Dec 21, 2022

casestudy commented Jan 2, 2023

kiliancabrera commented Feb 10, 2023

mjbour commented Feb 23, 2023

Ahmad495 commented Mar 30, 2023 •

edited

Loading

ua-knight commented Aug 29, 2023

sebastianfdz commented Sep 4, 2023

ahmedibra28 commented Nov 13, 2023

sychd commented Feb 21, 2024

Umesh-Bhati commented May 20, 2024

Umesh-Bhati commented May 20, 2024

paystrup commented May 29, 2024

chetansgit commented May 31, 2024

tgram-3D commented Jun 6, 2024 •

edited

Loading

Psarada84 commented Jun 20, 2024

rodericktech commented Jun 24, 2024

rodericktech commented Jun 24, 2024 •

edited

Loading

stevec01 commented Aug 7, 2024

JacobWeisenburger commented Aug 22, 2024

MustehsanGhouri commented Aug 27, 2024 •

edited

Loading

MustehsanGhouri commented Aug 27, 2024

ivanbicalho commented Sep 12, 2024

fontWeight doesn't work #796

fontWeight doesn't work #796

Comments

yellowBanano commented Dec 18, 2019

cympak01 commented Dec 26, 2019 • edited Loading

juby-gif commented Jun 5, 2020

bartmika commented Jun 5, 2020

mnowotnik commented Jan 4, 2021 • edited Loading

eyeamkd commented Apr 12, 2021

diegomura commented May 3, 2021

ljmerza commented Sep 6, 2022

Ahmad495 commented Dec 21, 2022

casestudy commented Jan 2, 2023

kiliancabrera commented Feb 10, 2023

mjbour commented Feb 23, 2023

Ahmad495 commented Mar 30, 2023 • edited Loading

ua-knight commented Aug 29, 2023

sebastianfdz commented Sep 4, 2023

ahmedibra28 commented Nov 13, 2023

sychd commented Feb 21, 2024

Umesh-Bhati commented May 20, 2024

Umesh-Bhati commented May 20, 2024

paystrup commented May 29, 2024

chetansgit commented May 31, 2024

tgram-3D commented Jun 6, 2024 • edited Loading

Psarada84 commented Jun 20, 2024

rodericktech commented Jun 24, 2024

rodericktech commented Jun 24, 2024 • edited Loading

stevec01 commented Aug 7, 2024

JacobWeisenburger commented Aug 22, 2024

MustehsanGhouri commented Aug 27, 2024 • edited Loading

Working Solution for Text Alignment and Wrapping in @react-pdf/renderer

MustehsanGhouri commented Aug 27, 2024

ivanbicalho commented Sep 12, 2024

cympak01 commented Dec 26, 2019 •

edited

Loading

mnowotnik commented Jan 4, 2021 •

edited

Loading

Ahmad495 commented Mar 30, 2023 •

edited

Loading

tgram-3D commented Jun 6, 2024 •

edited

Loading

rodericktech commented Jun 24, 2024 •

edited

Loading

MustehsanGhouri commented Aug 27, 2024 •

edited

Loading

Working Solution for Text Alignment and Wrapping in `@react-pdf/renderer`