WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce PDF Invoices & Packing Slips
[resolved] Webfonts within a custom template not rendering in PDF (4 posts)

  1. simonhume
    Member
    Posted 11 months ago #

    Hi there,

    Firstly, love the plugin, it's great!

    I'm having an issue using webfonts within my custom template for the packing slip.

    If i use debug mode (using the functions.php to generate HTML instead of the PDF) then the webfonts display fine, but as soon as it generates the PDF, the webfonts are missing and it defaults to the regular font instead.

    Any ideas if I need to hack up the CSS somehow to make it compatible? Or whether your plugin supports webfonts within PDF's?

    Many thanks

    Simon

    https://wordpress.org/plugins/woocommerce-pdf-invoices-packing-slips/

  2. Ewout
    Member
    Plugin Author

    Posted 11 months ago #

    Hi Simon,
    Webfonts should work, but there's a quite few caveats:

    • First of all, if you have done some failed tests, re-install the plugin first to make sure the font dir is flushed. If the PDF engine has downloaded the font once and the file was somehow corrupted, it won't download again and you're stuck
    • You need to do this in the header rather than in the css (i.e. the 'standard' method rather than the '@import' method google gives). You can find the header in html-document-wrapper.php
    • You won't have bold fonts, sometimes. This is an unfortunate issue with the PDF engine/font downloader. The font engine doesn't support numeric font weights, so you need font-weight: bold rather than font-weight: 700. For this reason I used to just copy the google font declaration and modify it like this:
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: normal;
      src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/yYRnAC2KygoXnEC8IdU0gQLUuEpTyoUstqEm5AMlJo4.ttf) format('truetype');
    }
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: bold;
      src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/k3k702ZOKiLJc3WVjuplzMDdSZkkecOE1hvV7ZHvhyU.ttf) format('truetype');
    }
    @font-face {
      font-family: 'Open Sans';
      font-style: italic;
      font-weight: normal;
      src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/O4NhV7_qs9r9seTo7fnsVCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
    }
    @font-face {
      font-family: 'Open Sans';
      font-style: italic;
      font-weight: bold;
      src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxrQhS7CD3GIaelOwHPAPh9w.ttf) format('truetype');
    }
    • Note the ttf/'truetype' urls rather than woff: The supplied font needs to be truetype. Google is quite annoying in that it sends different stylesheets based on the client that retrieves it. This means that if you let the plugin retrieve the stylesheet from google for you, it works fine, but you need to be somthing like Opera 10 for example to get the ttf if you view the stylesheet in your browser. (like this one: http://fonts.googleapis.com/css?family=Open+Sans)
    • Make sure to take a complete character set, so that you support any special characters (like latin-ext), most fonts don't do that out of the box
    • Finally, the most simple method by far is to just download the fonts yourself and call them locally on your server. The PDF is generated on the server, so you don't actually need webfonts.
    • @font-face {
      font-family: 'Your font name';
      font-style: normal;
      font-weight: normal;
      src: url(http://yoursite.com/fonts/yourfont.ttf) format('truetype');
      }
      
      @font-face {
      font-family: 'Your font name';
      font-style: normal;
      font-weight: bold;
      src: url(http://yoursite.com/fonts/yourfont-bold.ttf) format('truetype');
      }

      (include italic and bold italic too if you intend to use it)

  3. Ewout
    Member
    Plugin Author

    Posted 11 months ago #

    I forgot to mention that a possible cause for the fonts not downloading is that your server/php might not support downloading remote files (allow_url_fopen). For 'regular' use of webfonts this doesn't matter because the fonts go to the client rather than the server, but in this case the pdf engine downloads the fonts first.

  4. Ewout
    Member
    Plugin Author

    Posted 11 months ago #

    @simonhume, did you manage to add your webfont with the above instructions?

Reply

You must log in to post.

About this Plugin

About this Topic