Articles on: Branded Tracking Page

Add and Use Custom Fonts for Branded Tracking Page


Plans: Premium, Enterprise Platforms: Shopify


Overview


As an eCommerce merchant, it is crucial to maintain consistency regarding colors, logos, fonts, etc. across all platforms and outputs. AfterShip, in addition to our default fonts, allows you to upload custom fonts you may have designed or purchased for your brand.


What you’ll learn



Please note that you can store the fonts on any network server. For example, you can upload fonts to the Shopify file if you are a Shopify user. If you are not a Shopify user, you can upload them to other servers, such as Amazon S3, Google storage, Cloudflare R2, or any other cloud storage service provider.


How to upload a custom font on Shopify


  1. Download a custom font from the web or use your own designed font
  2. Go to your Shopify dashboard
  3. Go to Content > Files > click Upload files


Font files must be woff, woff2, otf, or ttf.



  1. Upload your custom font and copy its URL from the Link column



Please read the font’s license agreement and ensure you have permission to use it before uploading.


Add the custom font to your tracking page


  1. Log in to your AfterShip Tracking admin account
  2. Navigate to Tracking pages > Select the tracking page you want to edit > Click Edit



  1. Go to the Style tab > Fonts



  1. Click Manage custom fonts > Add font



  • Add the name of your font
  • Paste the font URL you copied
  • Click Add



The added font will be displayed under the Custom fonts section.



A maximum of 20 custom fonts can be added


  1. You can now use your custom fonts to style the different components across your page including primary buttons, text boxes, tabs, and pills.



Troubleshooting


1. I continue to receive an error stating, "The font file must be woff, woff2, otf, or ttf," despite my font being valid.


If your font is valid but you are still encountering a validation error, it is likely because of the Access-Control-Allow-Origin setting of your font, which does not allow us to access it from the tracking pages.


Please reach out to your cloud storage service provider or your IT department if the font is hosted on your own server. Ask them to update the Access-Control-Allow-Origin setting and add *.aftership.com to the allowed list.




If you have any questions regarding the use of custom fonts on your tracking pages, get clarity from our chat support team.


Updated on: 22/10/2024