skip to Main Content

I want to change the font family for the woocommerce email sent after order is placed.
I have tried adding the font in css but it is not working.

Any suggestions would be appreciated.

2

Answers


  1. Try with the below code –
    Add a CSS font file with the below code and use it in the mail using woocommerce action.

    add_action('woocommerce_email_header', 'add_css_to_email');
    
    function add_css_to_email() {
     echo '
     <style type="text/css">
     /* Put CSS here */
     @font-face {
       font-family: Myfont;
       src: url(font_family_file.woff);
     }
    
     div {
       font-family: Myfont;
     }
     </style>';
    }
    
    Login or Signup to reply.
  2. This is VERY nasty, but it works….

    Solution was first published by @Cookforweb here: <style> tag has been removed from woocommerce email templates

    Not a nice technique but it works!
    The first part of the solution is to include the part of the CSS code inside another tag (even if this tag is not valid) than ‘style’ to avoid stripping in the first place, like the example below:

    <style-inline>
        @font-face {
           font-family: 'Montserrat';
           font-style: normal;
           font-weight: 400;
           src: url(http://fontdomain-example.com/Montserrat-Regular.woff) format('woff');
        }
    </style-inline>
    

    If we leave it as is then our code will be rendering in our email code.
    So the next thing is to add a hook to ‘woocommerce_mail_content’ filter (with low priority in order to be the last filter to be run) replacing the ‘style-inline’ with ‘style’ string.

    add_filter( 'woocommerce_mail_content', 'woocommerce_mail_content_callback', 9999 );
    public function woocommerce_mail_content_callback($mail_content){
        $mail_content = str_replace([
            '<style-inline>',
            '</style-inline>'
        ], [
           '<style>',
           '</style>'
        ], $mail_content);
        return $mail_content;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search