How to Add Custom Fonts in
WooCommerce Order Emails

Category: WooCommerce

1

Upload your fonts to your WordPress, CDN or use third party service like Google Fonts ↗.
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
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;
```
Style an element with your new font, either in a stylesheet:
```
.selector {
  font-family: 'MyNewFont', serif;
}
```

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

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.

How to Add Custom Fonts inWooCommerce Order Emails