How to register Google fonts?

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]

@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",
    }
});

[linhnguyen11]

“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