dompdf and fonts

Piotr Kopszak

Hello list,

Apparently it is possible to change the font used by domPDF by using a font-face declaration in a css file. Would you be so kind and help me find out where it should go, say for object summary pdf. And where the fonts should be put.

Best Piotr

sophie

Hi Piotr,

Yes, font-face is supported. Copy the files to a local folder (for the backend object summary this is app/printTemplates/summary/local) and edit as needed. The font-face declaration should be at the top of your copy of pdf.css and the fonts can be placed in the local folder alongside it.

Piotr Kopszak

Dear Sophie, many thanks for your suggestions! I am still missing something. I have uploaded my font file "Raleway-Regular.ttf" to "<ca-root>/app/printTemplates/summary/local/" where also is placed the pdf.css file. However the resulting pdf is broken and does not display in Acrobat Reader at all (it says the file was damaged).

I have made a small step forward as I have managed to change the font in pdf.css to DejaVu Sans which works without errors (but interestingly only if I apply font-family to more specific rules e.g. span.label, using it in a body element rule does not work).

Here is my pdf.css

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: normal;
    /* this does not work
    src: url("http://localhost/app/printTemplates/summary/local/Raleway-Regular.ttf") format("truetype");
     
    this does not work either: 
    src:url("/app/printTemplates/summary/local//Raleway-Regular.ttf") format("truetype");

    nor this: */
    src:url("Raleway-Regular.ttf") format("truetype");
}
--------------------------------------------------------
#header {   position: fixed; left: 0px; top: -25px; right: 0px; height: 55px;  text-align: left; vertical-align: top; margin: 0px 5px 10px 0px; padding: 0px 5px 2px 0px; }
#footer { position: fixed; left: 0px; bottom: -50px; right: 0px; height: 20px; text-align: center; vertical-align: bottom; margin: 0px 5px 10px 5px; padding: 3px 5px 2px 10px; }
#header .pagingText:after { content: counter(page, decimal); }
#body { z-index: 30000; position: relative; }

/* this does not work              */
body { font-family: 'DejaVu Sans'; }
/* ------------------------------  */

img.headerImg {  width:135px;}
.headerText {  font-family: "helvetica, sans-serif"; font-size: 10px; margin: 0px 0px 10px 25px; }
.pagingText {   position: absolute; top: 0px; right: 10px; font-family: "helvetica, sans-serif"; font-size: 11px; text-align: right;  margin: 0px 0px 10px 25px; }

table.footerText {   width: 100%; }
td.footerText {  font-family: "helvetica, sans-serif"; font-size: 12px; text-align: center; }  
span.footerText {  font-family: "helvetica, sans-serif"; font-size: 12px; margin-left: 45px; } 

span.label {   width:30%; display:inline-block; font-size: 12px; font-weight: bold; text-transform:uppercase; }
/* this works if font-family is 'DejaVu Sans'    */
span.meta { font-family: 'Raleway';  width: 350px; display:inline-block; font-weight:regular; }
/* ---------------------------------- */
div.data {   font: "helvetica, sans-serif";  font-size: 12px; border-bottom: 1px solid #eeeeee; margin-top: 10px; }
div.findingAid.data {  border-bottom: 0px; }
.title {  font: "helvetica, sans-serif"; font-size: 18px; height: 25px; text-align: center; font-weight: bold;}
.representationList {  margin-top:10px; text-align: center; }

.thumbnail {  font: "helvetica, sans-serif"; font-size: 11px; border: 1px solid #999; width: 200px; height: 160px; float: left; text-align: center; margin-left: 10px; padding: 5px; overflow: none;}	

.pageBreak {  page-break-before: always; }
.clear {  clear: both; line-height: 5px; }

I am on 1.7.5 version. Would be very grateful for any advice what is wrong with my font-face declaration.

Best

Piotr

gjerdery

I wonder if the ttf file needs to go in the domPDF fonts directory, at /app/lib/core/Parsers/dompdf/lib/fonts/ in v 1.7.5.

Piotr Kopszak

It didn't help. Still the same error.

Piotr Kopszak

Success! @gjerdery you were almost right! The problem is you cannot just copy a font into dompdf 'fonts' directory. You have to install it with load_font.php. That means you have to make 'app/lib/core/Parsers/dompdf/lib/fonts' directory writable and load_font.php executable. Then it was just a question of running:

./load_font.php 'Raleway' /path/to/Raleway-Regular.ttf

and putting into pdf.css:

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: normal;
    src:url("fonts/Raleway-Regular.ttf") format("truetype");
}

and

span.meta { font-family: 'Raleway';  width: 350px; display:inline-block; font-weight:regular; }

Piotr Kopszak

And of course

body { font-family: 'Raleway'; }

does work if you remove font-family in more specific rules.

gbenigni

Any help about working with Chinese UTF characters? At now, I get always a plenty of "?".

Thank you.