Code128 (serial #) Font

Hello Matt,
The custom font documentation is indeed the way to go: Using custom fonts

The one part that doesn’t make sense is src: url(<?php echo $this->get_template_path(); ?>/fonts/myfont.ttf) The font gets loaded via CSS so you can’t embed PHP in the middle of it.

This CSS is processed in the template itself and this PHP will also be rendered.
If you prefer separating the PHP from the CSS file you could also use an action hook.
The font loading part is just for staging the TTF, you can use any CSS class in your template to target specific elements and leave the rest at the default Open Sans.

Morning! Thanks so much for the reply.

I’m just trying to load the font in the standard way. In the style.css in my customized-simple folder I have:

@font-face {
font-family: ‘code128’;
src: local(‘code128’), local(‘code128’), url(‘/fonts/code128.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
.barcode-font-pdf-invoice p {
font-family: ‘code128’;
font-weight: normal;
}

In the invoice.php I have:
<?php _e( ”, ‘woocommerce-pdf-invoices-packing-slips’ ); ?><p class=”barcode-font-pdf-invoice”><?php $this->order_number(); ?></p>

I’ve read through the other support tickets relating to fonts and can’t seem to pin down what is wrong. I’ve tried putting the fonts in a few different locations but nothing seems to take. Should the above code be working? Thanks again for your help!

Matt

Hi Matt,
The PHP bit is missing from your CSS ??
Using url(<?php echo $this->get_template_path(); ?>/fonts/code128.ttf), you should place the TTF in the /fonts folder inside your custom PDF template folder.

• This reply was modified 5 years, 6 months ago by Ewout. Reason: missing forward slash

Hello,

That is my point. I can’t add your code to the style.css because it is PHP code. Even when I place it directly in the invoice.php it does not process it. It needs to be between a <style> </style> tag to load the font right? What am I missing? I don’t understand how it can process it. When I follow your instructions, all it does is output the code at the top of the invoice. Are you saying don’t put it between the <style> tags? Can you give me an exact php and CSS file that works? Appreciate it!

Matt

Hello Matt,
Where exactly are you putting the PHP, is that in the style.css file of the custom template? (not to be confused with style.css of your WordPress theme!)
You write:

Even when I place it directly in the invoice.php it does not process it.

But the invoice.php template is full of PHP… The style.css file gets included into this php file for further processing: when you open the HTML source of the invoice (you can set the output to HTML under WooCommerce > PDF Invoices > Status > Output to HTML), you’ll see that the styles from that .css file are not loaded separately but rendered inline in the <style> tag of the header.

Could you post the full HTML output to pastebin.com and place a link here so that I can try to find the error? You can also share your style.css and invoice.php files if you prefer (don’t paste them here in the forums, the www.remarpro.com moderators don’t like that)

Hello,

Thanks for the deeper explanation. That was unclear in the custom fonts instructions. I changed the code to reflect your instructions. I was already outputting to HTML, so I viewed the source and see the full font url, however, it is still not working. You mentioned the font style is loaded inline, but when I look at the HTML output that uses the custom font, it looks normal. See below:

Shipping Method:  Fast Standard Shipping <p class=”barcode-font-pdf-invoice”>1027488</p>

Appreciate your help!
Matt

Hello Matt,
If the style.css is rendered and shows the full font path (not the PHP as you mentioned earlier) then you should be good to go. The font will not show in HTML mode because your browser can’t access the font on your server, but if you generate the PDF and the path is correct it should render it with the correct font.

We’re always open to tips on improving the documentation, could you elaborate on which part was not clear from the custom fonts instructions?

Hello,

I changed it to render the PDF and still am not seeing the font rendered. I appreciate your time assisting me. Any other things I can try? I don’t know if this is a related issue, but the shop_name and shop_address don’t come through on the invoice. I had to manually type those in. I tried disabling all the plugins and it still didn’t work. Any relation?

Thanks.
Matt

What’s the full path for the fonts in the rendered styles? Are there no missing slashes or double slashes in the path? Are the fonts in that location on your server?
If you share your invoice.php and style.css on pastebin.com that may let us help debug too.

With regards to the shop name & shop address, did you change those after generating the invoice for the first time? For testing I recommend enabling Test Mode, because these settings are part of the immutable set that normally shouldn’t change once the document has been created (otherwise a company name change would inadvertedly also change all existing invoices!).

Full path is: url(/www/aaaaaaa/public/wp-content/themes/storefront-child/woocommerce/pdf/Customized-Simple/fonts/code128.ttf) Everything looks good.

Here is my pastebin link: https://pastebin.com/jh6k9fGP Let me know your thoughts.

I will try enabling Test Mode for the shop name and address. Thanks!

Matt

Your CSS selector is .barcode-font-pdf-invoice p but looking at the template itself:

<p class="barcode-font-pdf-invoice"><?php $this->order_number(); ?></p>

the selector should be p.barcode-font-pdf-invoice

Ah. Dang. CSS sometimes gets the best of me. I can usually get it to work with the dev tools inspector, but didn’t have that option with the PDF. Thanks for catching that. I got it working on our staging site.

The store name and store address issue is low priority since we have a workaround, but I will try your suggestions and reach out of we need further help.

Thanks again for being so responsive to my questions! You have been awesome! You can consider this resolved. I will start a new thread for the other issue if needed.

No problem and you’re welcome!
With regards to your comment:

I can usually get it to work with the dev tools inspector, but didn’t have that option with the PDF.

You can use the inspector if you enabled “HTML output” in the status tab of the plugin settings. That way you can see all the HTML and CSS classes applied to the source that will be used to generate the PDF.

All the best with your store!