To Enable Chinese Font in the PDF

  • Resolved eosonwp

    (@eosonwp)


    4 years, 8 months ago

    Hi,

    I’m having a problem in understanding the solution provided in the Using Custom Font page.?

    For example, if my font name is fireflysung.ttf and my path is wp-content/themes/mytheme/woocommerce/pdf/yourtemplate,?in the? code provided by the solution (as attach below), may I know which part else do I need to edit besides the MyFont?

    /* Load font */
    @font-face {
    ????font-family:?‘MyFont’;
    ????font-style:?normal;
    ????font-weight:?normal;
    ????src:?local(‘MyFont’),?local(‘MyFont’),?url(<?php echo $this->get_template_path(); ?>/fonts/myfont.ttf)?format(‘truetype’);
    }
    @font-face {
    ????font-family:?‘MyFont’;
    ????font-style:?normal;
    ????font-weight:?bold;
    ????src:?local(‘MyFont Bold’),?local(‘MyFont-Bold’),?url(<?php echo $this->get_template_path(); ?>/fonts/myfont-bold.ttf)?format(‘truetype’);
    }
    @font-face {
    ????font-family:?‘MyFont’;
    ????font-style:?italic;
    ????font-weight:?normal;
    ????src:?local(‘MyFont Italic’),?local(‘MyFont-Italic’),?url(<?php echo $this->get_template_path(); ?>/fonts/myfont-italic.ttf)?format(‘truetype’);
    }
    @font-face {
    ????font-family:?‘MyFont’;
    ????font-style:?italic;
    ????font-weight:?bold;
    ????src:?local(‘MyFont Bold Italic’),?local(‘MyFont-BoldItalic’),?url(<?php echo $this->get_template_path(); ?>/fonts/myfont-bolditalic.ttf)?format(‘truetype’);
    }

    And for the font-family code below, where should I paste it?
    body {
    font-family:?‘MyFont’;
    }

    Can I have your kind guidance please??
    Thank you.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Contributor alexmigf

    (@alexmigf)

    Hello @eosonwp

    You should create first a custom theme/directory by copying the Simple template files to your current WordPress theme, like this: https://www.youriste.com/wp-content/themes/your-theme/woocommerce/pdf/MyCustomTemplate/ (paste the files inside)

    Then, edit the style.css file and add the @font-face and inside the current body replace the font-family:

    @font-face {
    font-family: 'fireflysung';
    font-style: normal;
    font-weight: normal;
    src: local('fireflysung'), local('fireflysung'), url('<?php echo $this->get_template_path(); ?>/fonts/fireflysung.ttf) format('truetype');
}
@font-face {
    font-family: 'fireflysung';
    font-style: normal;
    font-weight: bold;
    src: local('fireflysung Bold'), local('fireflysung-Bold'), url(<?php echo $this->get_template_path(); ?>/fonts/fireflysung.ttf) format('truetype');
}

body {
	font-family: 'fireflysung';
}

    Let me know.

    • This reply was modified 4 years, 8 months ago by alexmigf.
    • This reply was modified 4 years, 8 months ago by alexmigf.
    • This reply was modified 4 years, 8 months ago by alexmigf.
    • This reply was modified 4 years, 8 months ago by alexmigf.
    Thread Starter eosonwp

    (@eosonwp)

    Hi @alexmigf

    Thank you for your reply.

    I tried already but it didn’t work for me.
    I already created a fonts folder in the MyCustomTemplate and copied all the fireflysung files into it.

    Is there anything else that I need to do?

    Thank you.

    Plugin Contributor Ewout

    (@pomegranate)

    Did you also select that MyCustomTemplate template in the plugin settings? Detailed instructions can be found in our documentation:

    Thread Starter eosonwp

    (@eosonwp)

    Hi @pomegranate

    Yea, I already selected MyCustomTemplate in the plugin setting page but it is still not working.

    May I know the fireflysung.ttf files should be directly in MyCustomTemplate folder or in MyCustomTemplate/fonts/ folder?

    Plugin Contributor Ewout

    (@pomegranate)

    that depends on the location you declared in your style.css. In the above example, this:

    
<?php echo $this->get_template_path(); ?>/fonts/fireflysung.ttf

    would resolve to MyCustomTemplate/fonts/fireflysung.ttf

    Thread Starter eosonwp

    (@eosonwp)

    Yea, my folder location should be correct already. But it is still showing the chinese character as empty blocks.

    This is my style.css file contents:

    [ SNIP ]

    Is there any problem in the style.css ?

    Thank you.

    • This reply was modified 4 years, 8 months ago by Jan Dembowski.
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    @eosonwp Please do not post large code or responses like that here, it doesn’t work after ~10 lines or so.

    If you need share that data please use https://gist.github.com/ or https://pastebin.com/ instead and post the link to that paste.

    Thread Starter eosonwp

    (@eosonwp)

    @jdembowski Sorry for that

    @pomegranate This is my style.css file contents:

    https://gist.github.com/eosonwp/7ca0b7730b1784b3c0f9abde27fb4505

    Is there any problem in my style.css ? Cause it is still not working for me.

    Thank you.

    Plugin Contributor alexmigf

    (@alexmigf)

    Hello @eosonwp

    Please add the @font-face loaders to your style.css like i mention in this comment.

    Let me know.

    Thread Starter eosonwp

    (@eosonwp)

    @alexmigf

    It’s working already.
    Thank you !

    Plugin Contributor alexmigf

    (@alexmigf)

    You’re welcome @eosonwp ??

    Have a nice day!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘To Enable Chinese Font in the PDF’ is closed to new replies.