Add a Custom Font to Pages Created With Aftership Page Builder

Plans: All plans Platforms: Shopify

Overview

Designing your online store with the right mix of visual, design, and text elements is the best way to ensure an immersive experience for store visitors. To top that, using the right font is paramount in giving the best customer experience as it establishes a strong visual hierarchy, setting the overall tone of the website and creating an excellent graphic balance.

AfterShip Page Builder lets you easily add the fonts you want for your published pages to optimize readability and accessibility.

Please save your custom font saved in .ttf (or .otf), .woff (or .woff2), .svg, .eot, or .etc formats

Add custom fonts to published pages

Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code

Scroll down to Assets and select Add a new asset

A window will pop up asking you to add your font file. Upload the file and click Done

You can add multiple font files one at a time. Each font file should be less than 2 MB.

Go to Layout section and search for the theme.automizely.liquid and theme.liquid files
Add the following code right above </head> in both the files.

<style>
@font-face {
  font-family: "FontName";
  src: url({{"FontName.ttf"|asset_url}});
}
</style>

Enter your custom font name and file name (from previous step) with the correct extension in place of FontName and FontName.ttf respectively

Save the code in both the files
Once done, the newly added font will be available in the Style section in the AfterShip Page Builder page editor

Please wait at least 5 mins to let AfterShip Page Builder sync your added font.

For any further questions or help, please contact our chat support team

Updated on: 05/10/2023