Custom fonts using Klaviyo exported templates

Technical Q&A
1

Hi there,

Looking for help on how to apply custom fonts to Shopify notification emails that are replaced by Klaviyo exported templates.

Here’s what I’ve done:

  1. I’ve exported Klaviyo templates to replace Shopify’s notifications.

  2. Before the export , I applied “Poppins” font to the templates which works as expected on Klaviyo before export:

@import url('[https://fonts.googleapis.com/css2?family=Poppins&display=swap](https://fonts.googleapis.com/css2?family=Poppins&display=swap)'); p, h1, h2, h3, h4, ol, li, ul {font-family:Poppins, sans-serif; }

  1. After the template is exported, the custom font doesn’t work and defaults to a default font. As per Klaviyo, their set up may not work with Shopify so I’m unsure how the styling should be applied correctly.

  2. I’ve taken a look at the discussion here but so far with no luck.

Below is the exported template from Klaviyo for the Shopify “Order Cancelled” template without any customizations:


<table>

<table>

<table>

<tr>

<td>

</td>

</tr>

</table>

<table>

<table>

<table>

<tr>

<td>

</td>

</tr>

</table>

</table>
<table>

<table>

<tr>

<td>

![vplab logo](https://d3k81ch9hvuctc.cloudfront.net/company/T2wTUG/images/1353b377-9f34-4843-bee3-acca033133b9.png)

</td>

</tr>

</table>

</table>
<table>

<table>

<tr>

<td>

No half measures and no cutting corners.

</td>

</tr>

</table>

</table>
<table>

<table>

<table>

<table>

<table>

<table>

<tr>

<td>

[Shop](https://vplab.com/)

</td>

</tr>

</table>

</table>

<table>

<table>

<tr>

<td>

[Sports nutrition](https://vp-lab.myshopify.com/collections/sports-nutrition-vplab)

</td>

</tr>

</table>

</table>

<table>

<table>

<tr>

<td>

[Vitamins & minerals](https://vp-lab.myshopify.com/collections/vitamins-minerals-vplab)

</td>

</tr>

</table>

</table>

<table>

<table>

<tr>

<td>

[Vegan](https://vp-lab.myshopify.com/collections/vegan-vplab)

</td>

</tr>

</table>

</table>

<table>

<table>

<tr>

<td>

[Sale](https://vp-lab.myshopify.com/collections/sale-vplab)

</td>

</tr>

</table>

</table>

</table>

</table>

</table>

</table>
<table>

<table>

<tr>

<td>

Your order has been canceled

</td>

</tr>

</table>

</table>
<table>

<table>

<tr>

<td>

Your order {{ name }} was cancelled {% case cancel_reason %}{% when 'customer' %}at your request {% when 'inventory' %}because we did not have enough stock to fulfill your order.{% when 'fraud' %}because we suspect it is fraudulent.{% when 'other' %}due to unforeseen circumstances.{% endcase %}

{% if financial_status == 'voided' %}Your payment has been voided.{% elsif financial_status == 'credited' %}Your payment has been refunded.{% endif %}

</td>

</tr>

</table>

</table>
<table>

<table>

<tr>

<td>

[**Click here**](https://vp-lab.myshopify.com/pages/contact-us) to send us a message if you have any questions about your order.

</td>

</tr>

</table>

</table>
<table>

<table>

<tr>

<td>

Connect with us

</td>

</tr>

</table>

</table>
<table>

<table>

<table>

<table>

<table>

<tr>

<td>

[
![Button Text|96x96](upload://z9hTdAOVsUNsdkfWzECTu0xdrWm.png)
](https://www.facebook.com/vplab/)

</td>

</tr>

</table>

<table>

<tr>

<td>

[
![Custom|96x96](upload://4gpadtkTgE2I5Xko2l21Ri3gCr6.png)
](https://www.instagram.com/vplab_official)

</td>

</tr>

</table>

<table>

<tr>

<td>

[
![vplab youtube|96x96](upload://cYnX4p7MZkvvqIY66PMfpDFKBQ.png)
](https://www.youtube.com/c/VPLABNutrition)

</td>

</tr>

</table>

</table>

</table>

</table>

</table>
<table>

<table>

<tr>

<td>

© 2016 - 2022 ALL RIGHTS RESERVED BY "VPLAB" LTD. , REGISTRATION NUMBER: 40203032621, VISBIJAS PROSPEKTS 7, RIGA, LV-1014

</td>

</tr>

</table>

</table>

</table>

</table>

‌

</table>

Thanks for your help!

Best,

Eldars