Font style and size in email Only

Hi @sabahath ,

Thanks for reaching out!

I understand that you would like to change the font style and size in WooCommerce emails, is this correct?

By default, you can change certain elements, such as the Background color and Body text color, of the WooCommerce email template by navigating to WooCommerce → Settings → Emails and scrolling all the way down to Email Template.

WooCommerce doesn’t have any built-in options for customizing the font style and font size, and this would require customization.

Please note that custom code is outside the scope of our support we are able to provide however, you can try the following custom code and change the values (size and font-family) to your preferences.

Changing the font size:

add_filter( 'woocommerce_email_styles', 'woo_add_css_to_emails', 9999, 2 );

function woo_add_css_to_emails( $css, $email ) { 
   $css .= '
      p { font-size: 24px }
      h1 { font-size: 40px }
      h2 { font-size: 30px }
   ';
   return $css;
}

Changing the Font-family:

add_filter( 'woocommerce_email_styles', 'custom_woocommerce_email_styles' );

function custom_woocommerce_email_styles( $css ) {
    $css .= "
        body, td, p, span {
            font-family: Verdana, sans-serif !important;
        }
    ";

    return $css;
}

You can add this code to your child theme’s?functions.php?file or by using the?Code Snippets?plugin. Please don’t add custom code directly to the Storefront theme’s functions.php file as this will be wiped entirely when you update the theme.

Here are the results before adding the code:

Here are the results after adding the code:

Additionally, you can read more on customizing WooCommerce emails here.

Hope this helps!

Thanks a lot Roxy , the shared code had worked in child theme but the LINE SPACING is 0 , how will the code go if wanna set line spacing ?

Thanks a lot for your support

Hi @sabahath ,

Certainly! Here is an adjusted code that includes a line-height property to add some spacing between each line of text. You can replace the Changing the font size custom CSS previously provided, with this:

add_filter( 'woocommerce_email_styles', 'woo_add_css_to_emails', 9999, 2 );

function woo_add_css_to_emails( $css, $email ) { 
   $css .= '
      p {
         font-size: 24px;
         line-height: 2;
      }
      h1 {
         font-size: 40px;
         line-height: 4;
      }
      h2 {
         font-size: 30px;
         line-height: 4;
      }
   ';
   return $css;
}

You can adjust the line-height value to whatever you prefer to add more or less spacing between each line of text.

Additionally, since this topic relates to WooCommerce and not Storefront, in future, please can you create a topic in the WooCommerce forum for any WooCommerce core related support.

Here is a direct link to creating a topic in the WooCommerce core forum ??

Cheers!