Postscript Popups: Using Custom Fonts

Postscript's popup editor offers 21 native fonts to choose from to customize your brand's popup. Postscript's popups are fully customizable with CSS, including custom fonts outside of the native options.

Postscript provides an interface to change popup styles with custom code using an editor in the app. Even if you aren't a developer, or haven't written code before, there are some simple changes you can make to start customizing your popup.

 

Adding Custom Popup Font

1. Choose Google Font

  • Navigate to https://fonts.google.com/

  • Search for a font and weight (example: Krona One)

  • Choose "select this style"

  • Choose "View your selected families" (top right)

  • Change "<link>" to "@import"

  • Copy import code snippet and CSS rules to match the format below

    • Tip: make sure to include the correct font weight.

    • example:

<style>
@import url('https://fonts.googleapis.com/css2family=Krona+One&family=Orelega+One&display=swap');

body, h1, h2, h3, h4, p, span, div, button {
font-family: 'Krona One', sans-serif;
font-weight: 400;
} </style>

 

The elements for the CSS template are pulled from the Selected Family in https://fonts.google.com/, then filled in the template above.

2. Import code and CSS rules into Postscript

  • Navigate to your Postscript dashboard

  • Select the Popup editor from the side menu

  • Select "edit" for the desktop or mobile popup

  • Select "Edit CSS" (top right)

  • Past the CSS code snippet including the font styling

  • Save the CSS by selecting "Overwrite"

Now that you've imported the new font through CSS, your live popup will reflect the changes you've made. To view your popup, visit your Shopify store from an Incognito window or private browser.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.