Video walkthrough
Adding your own custom font to the Tydal email popup is a fantastic way to keep your store on-brand. Below is a video walkthrough of how you can add your store's font in minutes using CSS.
Adding your custom font
In the example below we'll walk through how to add your own custom font using a google font and the @import method.
📝 Our app allows imported fonts from the following sources:
https://fonts.googleapis.com - Google Fonts
https://use.typekit.net - Typekit/Adobe Fonts
https://cloud.typography.com - Hoefler & Co. fonts
https://cdn.shopify.com - Shopify hosted CSS font files
Uploading Custom Fonts from Google Fonts
1. First, sync your store via the settings page
2. From the Tydal dashboard, go to Opt-in popup > Styles > Custom CSS
3. Copy the CSS below and paste it in the Custom CSS field
@import url('https://fonts.googleapis.com/css2?family=Sono:wght@300;700&display=swap');
.ba_widget_parent {
font-family: 'Sono', sans-serif;
}
.ba_widget_content {
font-family: 'Sono', sans-serif;
}
4. Click Save and preview the popup on your store
Note: we're using the Sono font from Google, but you can use your own font.
Uploading Custom Fonts from your Shopify Admin
1. Upload the file on your Shopify Store. To access the Files page, go to Content > Files.
2. Copy the link of the uploaded font.
3. From the Tydal dashboard, go to Opt-in popup > Styles > Custom CSS
4. Copy the CSS below and paste it in the Custom CSS field
@font-face{
font-family: 'Suvenn' ;
src: url( 'https://cdn.shopify.com/s/files/1/0609/2213/4784/files/Suvenn.ttf?v=1678438421' )
}
.ba_widget_parent {
font-family: 'Suvenn', sans-serif;
}
.ba_widget_content {
font-family: 'Suvenn', sans-serif;
}Note: we're using the Suvenn font as a sample, but this should be changed to the name of your own font.