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.

回答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.

来源：https://stackoverflow.com/questions/44739201/google-webfonts-in-pdf-generated-by-dompdf

标签

css

dompdf

google-webfonts