cssdompdfgoogle-webfonts

Google Webfonts in PDF generated by DOMPDF


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.


Solution

  • 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.