Introduction
Adding your custom font to the Tydal review widget is a great way to keep your store's vibe on point! This little tweak can make your site look more cohesive and give your customers a seamless shopping experience.
Show off your brand’s personality and make your store stand out with a font that’s uniquely yours!
Adding your Custom Font
In the example below, we'll show you 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 Onsite > Advanced Settings > Custom CSS and selectors
3. Copy the CSS below and paste it in the Display Custom CSS field.
/* import Jersey 10 google font */
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
*, .review-body {
font-family: "Jersey 10", sans-serif !important;
font-weight: 400 !important;
}
4. Click Save and preview the review widget on your store.
Note: We're using the Jersey 10 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 Onsite > Advanced Settings > Custom CSS and selectors
4. Follow and edit the CSS below and paste it in the Custom CSS field
/* Import Font */
@font-face {
font-family: 'Suvenn';
src: url('https://cdn.shopify.com/s/files/1/0678/2599/1937/files/Suvenn.otf?v=1716971801');
}
*, .review-body {
font-family: 'Suvenn', sans-serif !important;
}
Note: We're using the Suvenn font as a sample, but this should be changed to the name of your own font.