​
CSS

Support

Client-side
Server-side

​
Examples

​
Preview

Use a simple CSS print property to set the page size.

import { CSS } from "@onedoc/react-print";

<CSS>{`@page { size: a4 landscape; }`}</CSS>;

​
Load a Google Font

Load a Google Font using the @import rule.

import { CSS } from "@onedoc/react-print";

<React.Fragment>
  <CSS>
    {`@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');`}
  </CSS>
  <p style={{ fontFamily: "Roboto, sans-serif" }}>
    This text uses the Roboto Light font.
  </p>
</React.Fragment>;

​
Layout

You can use the @page at-rule in CSS to manage all aspects of printed pages. More on this here.

import { CSS } from "@onedoc/react-print";

<React.Fragment>
  <CSS>{`@page {size: A4;margin-top:1cm;margin-right:1cm;margin-left:1cm;margin-bottom:1cm;`}</CSS>
  <div>Hello world!</div>
</React.Fragment>;

Was this page helpful?

compileFootnote