7

I am using Zend Framework and creating PDF with mpdf.
I am trying to use fontawesome for denoting some of the articles but the fonts of font awesome are not rendering properly below is the code .

$stylesheet =  file_get_contents("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
$stylesheet .= file_get_contents("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

$this->mpdf->WriteHTML($stylesheet,1);
$this->mpdf->WriteHTML($html,2);
$this->mpdf->allow_charset_conversion = true; 
$this->mpdf->charset_in = 'windows-1252';
$this->mpdf->Output();

The code I am using in the html

<span class="company-name">&#xf21b; name of the company</span>

Thanks in advance.

doydoy44
  • 5,720
  • 4
  • 29
  • 45
Mega Fox
  • 141
  • 1
  • 9
  • 1
    look, I'm using PHP around 5 or 6 years, and every time that I need to create a PDF, does not meet with my expectations (CSS or some other elements). So, I discovered (here in stackoverflow) an API that you only send your HTML and they return a PDF exactly like your page. Try it: http://www.html2pdfrocket.com – ital0 Jul 15 '15 at 14:45

3 Answers3

13

EDIT: Nowadays, this is an obsolete method, and should only be used on legacy systems.

I recommend the answer below, from @Arie, to modify the mPDF font in its recent versions and/or if it was installed by Composer, passing the parameters when instantiating the class.

The easy way:

  1. Copy fontawesome-webfont.ttf file into /mPDF/ttfonts/ directory.

  2. Edit /mPDF/config_fonts.php, search the array started by $this->fontdata and add to it:

"fontawesome" => array(
    'R' => "fontawesome-webfont.ttf",
),
  1. Change your document CSS properly, with your new font family. Eg.:
$stylesheet = '.company-name { font-family: fontawesome; }';
  1. When you instantiate the class, let the first parameter in blank:

Eg.:

$mpdf = new mPDF();

or

$mpdf = new mPDF('', 'A4');

I am tested with mPDF 6.0 and it worked.

Also, the mPDF manual explain how to do it with more options: Fonts in mPDF 6.x

Lord_Dracon
  • 290
  • 1
  • 4
  • 14
  • 3
    Good idea! Added ``$pdf->WriteHTML('.fa { font-family: fontawesome;}',1);`` so I could use it like real: ```` as example for the [flash](http://fontawesome.io/icon/bolt/). The unicode is right below the giant icon on the page, and must be prefixed by ````. – Martin Schilliger Feb 17 '17 at 22:41
  • 1
    @MartinSchilliger good idea, working great...But I added `font-style: normal;` because by default the `` tag shows icons in italic ! – Meloman May 21 '21 at 14:31
6

A more recent solution for Font Awesome 5.x and mPDF 7.x, when you don't want to edit the source files/dirs from mPDF: https://mpdf.github.io/fonts-languages/fonts-in-mpdf-7-x.html

My use case, this offers usage of mPDF supplied fonts, fontawesome and another custom font (ibmplex in this case). Note that when supplying a font name such as 'ibmplex' and 'fontawesome', they are lowercase. To avoid confusion why a font doesn't work, I'd advice using lower case and no spaces for the names.

$defaultConfig = (new Mpdf\Config\ConfigVariables())->getDefaults();
$fontDirs = $defaultConfig['fontDir'];

$defaultFontConfig = (new Mpdf\Config\FontVariables())->getDefaults();
$fontData = $defaultFontConfig['fontdata'];

$mpdf = new \Mpdf\Mpdf([
    'fontDir' => array_merge($fontDirs, [
        __DIR__ . '/../../resources/fonts',
    ]),
    'fontdata' => $fontData + [
        'ibmplex' => [
            'R' => 'IBMPlexSans-Regular.ttf',
            'B' => 'IBMPlexSans-Bold.ttf',
            'I' => 'IBMPlexSans-Italic.ttf',
        ],
        'fontawesome' => [
            'R' => 'fa-solid-900.ttf'
        ],
    ],
    'default_font' => 'ibmplex',
    'format' => 'A4'
]);

Then you can use 

<span style="font-family: fontawesome;">&#xf3ed;</span>

As per https://fontawesome.com/cheatsheet -- note that f3ed is the actual icon in this case.

Arie
  • 640
  • 8
  • 16
  • 1
    Works like a charm. I just omitted all the `ibmplex` stuff. I also added the other fontawesome ttfs: `['fontawesome' => ['R' => 'fa-regular-400.ttf'], 'fontawesome-solid' => ['R' => 'fa-solid-900.ttf'], 'fontawesome-brands' => ['R' => 'fa-brands-400.ttf']]` And in my CSS I added helper classes: `.fa { font-family: fontawesome; } .fas { font-family: fontawesome-solid; } .fab { font-family: fontawesome-brands; }` – Chris May 22 '21 at 11:06
  • I think that is the best solution nowadays. I edited my answer above with that note. – Lord_Dracon May 22 '21 at 20:02
-1

Actually, if you have installed mPdf with composer, add the following lines into file located in vendor\mpdf\mpdf\src\Config\FontVariables.php

"fontawesome" => [ 
                    'R' => "fontawesome-webfont.ttf",
                ],

inside the 'fontdata' section

LordZyx
  • 146
  • 1
  • 8
  • It's not recommended to manually modify the files in the vendor folder. The best solution for those who installed by composer is @Arie solution above. – Lord_Dracon May 22 '21 at 19:49