Dompdf not displaying custom fonts correctly

Am building a WordPress plugin for my client that will allow users customize their products before buying in WooCommerce. Once an order is placed, the plugin save the users selections in the order’s meta and everything is working fine.

Now my client want me to construct a PDF with some part of the data received from the user and I have used domPDF to achieve that. The problem now is that my client want me to use a custom font but domPDF is not decoding the fonts properly.

I have installed the font using load_font.php which can be found here

I have installed a font called Smoothie Shoppe using the command line like this

$ php load_font.php Smoothie-Shoppe ./SmoothieShoppe.ttf and it installed successfully.

Also styled the p elements with the font-family in the head tag like this

    <style>
        p {
           font-family: Smoothie-Shoppe !important;
           text-align:center;
        }
     </style>

Now when the PDF loads, then font displayed do not look like the correct one. The letters will just be deformed.

This is how it looks currently

How it should look

Answer

I later fixed this myself. Because there are about 15 ckeditor instances in that pop up, all of them will not be instantiate fully at once.

Also, since am using Vuejs to display the pop up, the pop up rebuilds everything inside it every time the pop up is shown. So I had to add events to all the inputs, and then change the font family of each textarea once each is ready using Typescript.

I hope this helps anyone who found himself/herself in my shoes.

Advertisement

Answer