search

diegomura / react-pdf

📄 Create PDF files using React
https://react-pdf.org
MIT License
14.7k stars 1.17k forks source link

How to register Google fonts? #1075

Closed DewangS closed 3 years ago

DewangS commented 3 years ago

I want to use Roboto Font from Google. Currently I am using this font family for my Reacty app by using the css though the Font.Register() api of react-pdf doesn't allow CSS, how am going to use this font? So, far I even tried to download TTF font files from Google and placed them under my /public/fonts folder and tried to use my /public/fonts/Roboto.ttf as a source and it fails to compile. Any idea?

When I tried below ....

Font.register(
    '/public/fonts/Roboto-Regular.ttf',
    { family: 'Roboto' },
  );

I got the below error ...

Unhandled Rejection (Error): Unknown font format push../node_modules/@react-pdf/fontkit/dist/fontkit.browser.es.js.fontkit$1.create node_modules/@react-pdf/fontkit/dist/fontkit.browser.es.js:68 FontSource._callee2$ src/font/font.js:44 41 | } else if (BROWSER || isUrl(this.src)) { 42 | const { headers, body, method = 'GET' } = this.options; 43 | const data = await fetchFont(this.src, { method, body, headers });

44 | this.data = fontkit.create(data); | ^ 45 | } else { 46 | this.data = await new Promise((resolve, reject) => 47 | fontkit.open(this.src, (err, data) =>

I also tried below though it refers to CSS NOT the actual font so, obviously it won't work and I can't find direct links to font files on Google Fonts ...

Font.register( 'https://fonts.googleapis.com/css?family=Serif', { family: 'Roboto' }, );

DewangS commented 3 years ago

This is clearly not working with Google fonts (TTF and woff2) I even tried to extract the gstatic link from the CSS and still getting the same error. i.e. unknown font format. So, the question is how do we use different font styles in a single document without being able to register the font? I would really appreciate if someone can please get back with even a YES or NO answer to this feature ?

Font.Register(
'https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxMIzIXKMnyrYk.woff2', 
{ family: 'Roboto'})
linhnguyen11 commented 3 years ago

"Can you try importing the font directly in your import statements of JS file like import someFont from 'someDir/Lato-Italic.ttf'; and then use someFont in your src attribute of Font.register(). The only disadvantage is that you have to import all the fonts individually."

680

DewangS commented 3 years ago

@linhnguyen11

Thanks very much for the tip. Yes, it worked..!!!! below is my code extract if anyone else run in to this issue.

import Roboto from "../../../../assets/fonts/Roboto-Regular.ttf"

Font.register({
    family: 'Roboto',
    format: "truetype",
    src: Roboto
  });

const styles = StyleSheet.create({
    page: {
      marginTop: 0,
      paddingLeft: "2mm"
    },
    blankText: {
        marginBottom: -10
    },
    textName: {
      marginLeft: 12,
      paddingTop: 15,
      fontSize: 12,
      fontWeight: 'heavy',
      textAlign: "justify",
      fontFamily: "Roboto",
    }
});
nanokoko89 commented 1 year ago

@linhnguyen11

Thanks very much for the tip. Yes, it worked..!!!! below is my code extract if anyone else run in to this issue.

import Roboto from "../../../../assets/fonts/Roboto-Regular.ttf"

Font.register({
    family: 'Roboto',
    format: "truetype",
    src: Roboto
  });

const styles = StyleSheet.create({
    page: {
      marginTop: 0,
      paddingLeft: "2mm"
    },
    blankText: {
        marginBottom: -10
    },
    textName: {
      marginLeft: 12,
      paddingTop: 15,
      fontSize: 12,
      fontWeight: 'heavy',
      textAlign: "justify",
      fontFamily: "Roboto",
    }
});

Hi Thanks for your conclusion Do you know how to add fonts with bold, medium, italic ? Thanks

DewangS commented 1 year ago

@nanokoko89 not sure about individual TTF as when you download the Roboto font family from Google, you do get various TTF like Roboto-Bold.ttf, Roboto-Medium.ttf etc .. I normally use the fontweight CSS styling to make it bold.

qcho commented 1 year ago

FTW Just found a better solution in https://stackoverflow.com/a/70577891

Resulting in something like:

Font.register({
  family: 'Inter',
  fonts: [
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyeMZhrib2Bg-4.ttf',
      fontWeight: 100,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyfMZhrib2Bg-4.ttf',
      fontWeight: 200,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuOKfMZhrib2Bg-4.ttf',
      fontWeight: 300,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf',
      fontWeight: 400,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fMZhrib2Bg-4.ttf',
      fontWeight: 500,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZhrib2Bg-4.ttf',
      fontWeight: 600,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYMZhrib2Bg-4.ttf',
      fontWeight: 700,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyYMZhrib2Bg-4.ttf',
      fontWeight: 800,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYMZhrib2Bg-4.ttf',
      fontWeight: 900,
    },
  ],
});
mmubashshir commented 1 year ago

This actually works for me, and coincidentally I wanted the same font 'Inter'. And all weights are also accessible. Thank you for the solution.

Loner291999 commented 1 year ago

FTW Just found a better solution in https://stackoverflow.com/a/70577891

Resulting in something like:

Font.register({
  family: 'Inter',
  fonts: [
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyeMZhrib2Bg-4.ttf',
      fontWeight: 100,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyfMZhrib2Bg-4.ttf',
      fontWeight: 200,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuOKfMZhrib2Bg-4.ttf',
      fontWeight: 300,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf',
      fontWeight: 400,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fMZhrib2Bg-4.ttf',
      fontWeight: 500,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZhrib2Bg-4.ttf',
      fontWeight: 600,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYMZhrib2Bg-4.ttf',
      fontWeight: 700,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyYMZhrib2Bg-4.ttf',
      fontWeight: 800,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYMZhrib2Bg-4.ttf',
      fontWeight: 900,
    },
  ],
});

bless you, wanted the same font

franklinjavier commented 6 months ago

FTW Just found a better solution in https://stackoverflow.com/a/70577891

Resulting in something like:

Font.register({
  family: 'Inter',
  fonts: [
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyeMZhrib2Bg-4.ttf',
      fontWeight: 100,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyfMZhrib2Bg-4.ttf',
      fontWeight: 200,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuOKfMZhrib2Bg-4.ttf',
      fontWeight: 300,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf',
      fontWeight: 400,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fMZhrib2Bg-4.ttf',
      fontWeight: 500,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZhrib2Bg-4.ttf',
      fontWeight: 600,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYMZhrib2Bg-4.ttf',
      fontWeight: 700,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyYMZhrib2Bg-4.ttf',
      fontWeight: 800,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYMZhrib2Bg-4.ttf',
      fontWeight: 900,
    },
  ],
});

it worked here too... thank you

Elham13 commented 6 months ago

@linhnguyen11

Thanks very much for the tip. Yes, it worked..!!!! below is my code extract if anyone else run in to this issue.

import Roboto from "../../../../assets/fonts/Roboto-Regular.ttf"

Font.register({
    family: 'Roboto',
    format: "truetype",
    src: Roboto
  });

const styles = StyleSheet.create({
    page: {
      marginTop: 0,
      paddingLeft: "2mm"
    },
    blankText: {
        marginBottom: -10
    },
    textName: {
      marginLeft: 12,
      paddingTop: 15,
      fontSize: 12,
      fontWeight: 'heavy',
      textAlign: "justify",
      fontFamily: "Roboto",
    }
});

It didn't work form me, got following error

Cannot find module './Roboto-Regular.ttf' or its corresponding type declarations.

Elham13 commented 6 months ago

FTW Just found a better solution in https://stackoverflow.com/a/70577891 Resulting in something like:

Font.register({
  family: 'Inter',
  fonts: [
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyeMZhrib2Bg-4.ttf',
      fontWeight: 100,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyfMZhrib2Bg-4.ttf',
      fontWeight: 200,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuOKfMZhrib2Bg-4.ttf',
      fontWeight: 300,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf',
      fontWeight: 400,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fMZhrib2Bg-4.ttf',
      fontWeight: 500,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZhrib2Bg-4.ttf',
      fontWeight: 600,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYMZhrib2Bg-4.ttf',
      fontWeight: 700,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyYMZhrib2Bg-4.ttf',
      fontWeight: 800,
    },
    {
      src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYMZhrib2Bg-4.ttf',
      fontWeight: 900,
    },
  ],
});

bless you, wanted the same font

I got this error

Could not resolve font for Inter, fontWeight 800

dorjsurend commented 5 months ago

@Elham13 register your fonts with fontWeight { src: RobotoBoldItalic, fontWeight: 'bold', fontStyle: 'italic', },

KreisonReis commented 3 months ago

@Elham13 register your fonts with fontWeight { src: RobotoBoldItalic, fontWeight: 'bold', fontStyle: 'italic', },

Works for me, thankssss!

AshrafSada commented 2 months ago

In C# if the font is downloaded into specific folder, i.e wwwroot/fonts QuestPDF FontManager can register all TTF font types in the folder and handle the family names and styles: var cairoStream = File.OpenRead("wwwroot/fonts/Cairo/Cairo-VariableFont_slnt,wght.ttf"); var latoStream = File.OpenRead("wwwroot/fonts/Lato/Lato-Regular.ttf"); FontManager.RegisterFont(cairoStream); FontManager.RegisterFont(latoStream);

mohamedtsx commented 2 months ago

For TTF URLs of Google Fonts, check this gist.