Fonts for pdf

  • Resolved joy0114

    (@joy0114)


    4 years ago

    Hello,

    I am using the latest version of the plugin, as well as wordpress 5.7, and I have a problem displaying custom fonts on the pdf.

    I have followed the instructions of the documentation for the custom fonts declarations, the personal template, the fonts directory which contains my 3 custom fonts, and yet, two of them are not displayed on the pdf.
    They are replaced by Times New Roman.

    It’s strange because when I ask for an html output, the 3 custom fonts are well displayed.

    The only custom font which is well displayed is Apalu.

    Here, may style.css:

    @font-face {
    font-family: 'RobotoCondensedBoldItalic';
    font-style: normal;
    font-weight: normal;
    src: local('RobotoCondensedBoldItalic'), local('RobotoCondensedBoldItalic'), url('https://my-website.tld/wp-content/themes/hermine-child/woocommerce/pdf/template-facture-perso/fonts/RobotoCondensedBoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoLight';
    font-style: normal;
    font-weight: normal;
    src: local('RobotoLight'), local('RobotoLight'), url('https://my-website.tld/wp-content/themes/hermine-child/woocommerce/pdf/template-facture-perso/fonts/RobotoLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Apalu';
    font-style: normal;
    font-weight: normal;
    src: local('Apalu'), local('Apalu'), url('https://my-website.tld/wp-content/themes/hermine-child/woocommerce/pdf/template-facture-perso/fonts/Apalu.ttf') format('truetype');
}

    And for example, this declaration is well displayed in html, but not in pdf:

    .shop-name {font-family: ‘RobotoCondensedBoldItalic’;color:#0e294b;}

    So I guess I didn’t make a syntax error and the plugin finds the custom fonts correctly.

    In pdf, the only block that is displayed with the right font is:
    #remerciements-fact {font-family: ‘Apalu’;color:#0e294b;}

    Does anyone have an idea to solve this issue ?
    Thanks a lot in advance.
    Best regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Darren Peyou

    (@dpeyou)

    Hi @joy0114,

    That is quite peculiar, however I would recommend that you follow the documentation and use paths — so using this bit: url('<?php echo $this->get_template_path(); ?>/fonts/RobotoCondensedBoldItalic.ttf')
    This won’t work for the browser but it’s the most reliable method for the PDF on the server. ??

    HTML actually isn’t an indicator for whether the CSS is correct because HTML lives locally in the browser, whereas a PDF is remotely on the server.

    • This reply was modified 4 years ago by Darren Peyou. Reason: editing the bit they should use
    Thread Starter joy0114

    (@joy0114)

    Hi Darren,

    Thanks a lot for your answer.

    Unfortunately, it does not work better with this code.

    In the plugin configuration, tab “state”, all “system configuration” is “green”, and directories are writeable.

    Within my documents, the only part which is displayed with the right font (declared in style.css of the custom template), is hard coded in “invoice.php” in a div block.
    But everything else is replaced by Sans Serif or Times new Roman, without respecting the declaration of style.css.

    Very strange.
    Would it be possible that issue is on the server side ?

    Another question:
    What is the purpose of the option “Use another HTML5 parser to parse the HTML code” (or something like that).
    As for you, could it be an idea to solve my problem ?

    Thanks a lot.
    Best regards

    Thread Starter joy0114

    (@joy0114)

    Hi,

    Ok, I finally found the issue…

    For those who may encounter this display problem:

    It seems absolutely necessary to add, in style.css (of your custom template):
    font-style: italic (or whatever you declare in @font-face);
    font-weight: bold (or whatever you declare in @font-face);

    in the id or class declaration for a block, in addition of your custom “font-family”.

    If it can be useful to someone.
    Perhaps it could added to the documentation on https://docs.wpovernight.com/woocommerce-pdf-invoices-packing-slips/using-custom-fonts/

    Thanks, Darren, for you support.
    Best regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Fonts for pdf’ is closed to new replies.

Tags