How to Add Custom Fonts in
WooCommerce Order Emails

Category: WooCommerce
Custom Fonts in WooCommerce Order Emails
Custom Fonts in WooCommerce Order Emails


  1. 1

    Upload your fonts to your WordPress, CDN or use third party service like Google Fonts ↗.

  2. 2

    Open the file email-header.php and copy the URL of the font into the <head> tag of the document,—for example,

    <head>
    ...
    ...
    <link href="https://fonts.googleapis.com/css?family=MyNewFont" rel="stylesheet">
    </head>
  3. 3

    Use the following CSS rules to specify these families in files email-header.php, email-footer.php and email-styles.php,

    font-family: 'MyNewFont', sans-serif;
  4. Style an element with your new font, either in a stylesheet:

    .selector {
      font-family: 'MyNewFont', serif;
    }
  5. or with an inline style on the element itself:

    <h1 style="font-family: 'MyNewFont', serif;">Your text</h1>


Email Templates Main Files

  • email-header.php. This file contains the HTML header of the email.
  • email-footer.php. This file contains the HTML footer of email.
  • email-styles.php. WooCommerce takes a set of CSS rules and dynamically inserts them into the template as inline styles.

Tutorials

Purchase Email Templates $35 USD

Each purchase of WET comes with 20 different styles —
and a lifetime of free fresh designs & bug-fix updates.

One purchase for all your future projects.