Using custom fonts

[dor1202]

Hi. I'm using a custom font: Orbitron-VariableFont_wght.ttf file It works through the app but when I try to print with react-to-print the font is missing causing the data to not render at all. I'm adding a few screenshots and attempts that I tried to solve the issue.

Rendered in site

Rendered in print

I'm using react, the component is:

function PrintProjects() {
    const [t] = useTranslation();
    const layoutDiv = useRef<HTMLDivElement>(null);

    return (
        <div>
            <ReactToPrint
              copyStyles content={() => layoutDiv.current}
              trigger={() => (
                <ul className="nav float-right">
                  <Button variant="outlined" startIcon={<Icons.PrintIcon />}>
                    Print
                  </Button>
                </ul>
              )}
            />
            <div ref={layoutDiv}>
                <img
                    src='/img/Logos/LogoDip.png'
                    alt="Logo"
                    className={"brand-image " + Styles['width-90-px']}
                />
                <div>
                    <div className={Styles['print-name-div']}>
                        <b>By Project</b>
                    </div>
                    <br />

                    <Grid container spacing={2}>
                        <Grid item xs={12}>
                            <Card>
                                <CardContent>
                                    <div className="Orbitron20">
                                        <h5>{t("general.cards.inkUsage")}</h5>
                                    </div>
                                    <Divider style={{ 'marginBottom': '15px' }} />
                                    <InkUsageForPrint inkUsageData={inkUsageData} />
                                </CardContent>
                            </Card>
                        </Grid>
                    </Grid>
                </div>
            </div>

            <style>
                {`
                @font-face {
                    font-family: Orbitron-Variable;
                    src: url(./../../../../style/fonts/Orbitron-VariableFont_wght.ttf);
                }

                @media print{
                        .Orbitron20 {
                            font-family: Orbitron-Variable;
                            font-size: 20px;
                            letter-spacing: 1.5px;
                        }
                }
                `}
            </style>

        </div>
    );
};

When adding className="Orbitron20" to the div the entire element isn't rendered.

[MatthewHerbst]

Hello, apologies for the delayed response. Could you possibly put this on a Codesandbox so I can view the font live? I'm not familiar with it off the top of my head. I find it strange the missing font causes nothing to render. I would expect the browser to fallback to its default font.

[dennemark]

Using font-display: swap in @font-face might solve this: https://github.com/gregnb/react-to-print/issues/281#issuecomment-1098039528 At least it worked for me.

[MatthewHerbst]

Going to close this for now. I plan on doing a big overhaul of how the library handles fonts in the next few weeks hopefully