Google Webfonts in PDF generated by DOMPDF

Question

I am using two webfonts in a page that I convert to a PDF using dompdf. I have this in the header:

<link href='http://fonts.googleapis.com/css?family=Signika:600|Roboto+Condensed' rel='stylesheet' type='text/css'>

I then use them in CSS rules like

body {
  font-family: "Roboto Condensed", sans-serif;
  [ ... ]
}
h1 {
  font-family:'Signika', Arial, Helvetica, sans-serif;
  [ ... ]
}

Now, when I generate the PDF, the h1 is displayed with the "Signika" font, but "Roboto Condensed" is replaced by Helvetica or some other standard sans-serif font.

If I open the "preview" file (i.e. the php page which I then include in the PDF generation script), "Roboto Condensed" is displayed as expected, but it doesn't make it into the PDF. But as I wrote, "Signika" is there in the PDF, and that's somehow odd to me. BTW, I also tried to include the font-face rule directly in CSS rules for p, div, li etc. but that wouldn't change anything.

Any suggestions how I could fix that?

---

EDIT/ADDITION:

Thinking about it, a difference between the two fonts is that Roboto Condensed has a space in its name. I wonder if that could cause the problem (i.e. dompdf not being able to handle such a font name)? But I can't change that as long as I am fetching the fonts from the Google server.

Walburga

Just adding this info for your EDIT/ADDITION paragraph. You can change the font-family name fetched by google fonts. Open the font URL, copy and edit the font-family to your css. Roboto Condensed URL included in your post: fonts.googleapis.com/css?family=Signika:600|Roboto+Condensed – Misrepresent

Answer 1

I found the solution myself:

As I had added to my question in an edit, the reason obviously was that the font-family name "Roboto Condensed" contains a space, which dompdf doesn't seem to like.

I downloaded the font, created three versions of it with the font generator on Fontsquirrel and put them on my server, together with this stylesheet:

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
         url('robotocondensed-regular-webfont.woff') format('woff'),
         url('RobotoCondensed-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Then, in my CSS rules I used that new font name roboto_condensedregular in font-family: roboto_condensedregular, sans-serif;

Now it works, also in the PDF.

Walburga

I wouldn't expect a space to cause an issue and, in testing, was able to render with that font using your original sample HTML. However, as you found, downloading the font is certainly an option. I wonder if there was maybe something about your CSS that Dompdf did not handle correctly. – Crimson

well, it did cause the issue - it was the only thing I changed that made it working... Might depend on the browser's handling of the space though... – Walburga

Interesting. Which version of Dompdf are you using? Is allow_url_fopen true? Maybe something about the curl fallback? – Crimson

Johannes, a big thank you to you! 4 years later, DomPDF still has this issue...downright sad. Lost an entire day to this yesterday. Thank you a million! – Tenenbaum

Answer 2

You don't need to actually do all of this. Simply use the @importoption to embed the font in your html. Works like a charm using laravel-dompdf.

screenshot

Cetology