Learn how to install a custom font in your Privy account to use in your sign up displays.
A custom font is one way your brand can express itself and become more recognizable. The font can convey your personality while highlighting how you would like to be perceived by your audience.
Note: Custom fonts are only available for Convert displays. Since most email clients do not support custom fonts, the Privy email designer provides a selection of web-safe fonts instead.
Fonts that are hosted by online directories and self-hosted are supported. Fonts offered via an online directory like Google Fonts are easier to set up and manage, so they are recommended for most users.
Privy currently recommends Google Fonts, so this example uses its catalog as a reference. That said, the same ideas apply wherever your font is hosted. To add a custom font:
Most Privy merchants decide to self-host store their font files in a storage option provided by their e-commerce provider, so this example uses Shopify as a reference. That said, the same ideas apply wherever your font is self-hosted. To add a custom font:
Ensure the free or purchased font file is downloaded to your computer. In this case, the selected custom font is called “SyneMono-Regular” and was available in the “TTF” format.
Upload the font to your hosting provider. To do this in Shopify, navigate to Homepage > Content > Files and select the Upload files option at the top-right. The file will upload and be assigned a URL.
Open a text editor, like Brackets or Sublime Text, to create a font-face file. If you were provided a font-face file, please skip ahead to upload the font-face file.
In the text editor, paste in the information listed below to create a font-face file. Please make sure to replace the generic information with your font’s information.
Add your font source URL to the font-face file, and match the format to your file extension. In this case, the URL is listed next to the uploaded font file in Shopify and uses the TTF extension.
Save your customized font-face file as a CSS file (e.g., SyneMono-Regular.css).
Upload the CSS font-face file to Shopify and copy the assigned URL.
Once you have the font’s URL, navigate to the Customizations page of your Privy settings.
Scroll down and click the New Custom Font button.
Enter a font name. Use the font family from the directory when possible. In this example, the official font family is SyneMono-Regular.
Next, paste the font URL from earlier in the Font CSS URL field.
Check the box if you only want this font available on landing pages and embedded forms.
Click the Save Custom Font button.
That’s it! The custom font will now appear in the display editor. To add more fonts, repeat this process until you have added all the fonts you need.
The most common issue with custom fonts is that the provided URL is formatted incorrectly. To check and correct this possible error:
Check the URL added to Privy, making sure it starts with HTTPS:// and does not end with a font file extension (e.g., .woff2).
Try opening the URL by either clicking on it or copying and pasting it into a new tab. It should open a plain text CSS file containing the font information. If this action triggers a download of the font file, it is not the correct URL.
For Privy to reference the correct custom font, the font name in Privy needs to match the font family listed in the font file. To confirm that the two values match, open/visit the font URL and check the font-family line.Then, navigate to Customizations in Privy, scroll down to the Custom Fonts section, and confirm that the Font Name matches the font-family line from the font file.
Validate your font to confirm it is not corrupt. Errors in a font file, such as incomplete lines of code, typically prevent a font file from working. Various tools, such as Font Book on Mac, make this validation process easier.