GuideHTML to PDFStyling your PDF

Fonts

Fonts work the same way as they would in the browser.

Hosted Webfont

You can add a link to any hosted webfont stylesheet, such as:

  • Google Fonts or Typekit,
  • Self-hosted fonts on an existing website.

To use these fonts when converting to PDF, you will have to link the stylesheet in your HTML. Given that HTML5 supports <link> placement in the <head> and <body>, you can place the link in either location, or inside your React component.

1<!DOCTYPE html>
2<html>
3<head>
4  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
5</head>
6<body style={{
7    fontFamily: 'Roboto, sans-serif'
8}}>
9  <p>Some text</p>
10</body>
11</html>

Local Webfont

You can also use local webfonts. To do this, you will need to include the font files as an asset when uploading with the Onedoc SDK. You can then reference the font in your CSS.

1@font-face {
2  font-family: 'Roboto';
3  src: url('Roboto-Regular.ttf') format('truetype');
4}
1const file = ff.pdf.generate([
2  new File([fs.readFileSync("index.html")], "index.html", {
3    type: "text/html",
4  }),
5  new File([fs.readFileSync("Roboto-Regular.ttf")], "Roboto-Regular.ttf", {
6    type: "font/ttf",
7  }),
8], {})
Built with