Use Custom Fonts in Account Engagement

Account Engagement does not offer any direct functionality to add custom fonts. However, there are some external methods that can be used to reference custom fonts within Account Engagement assets. This is an advanced topic that assumes a solid understanding of web server configuration. This article is given for your reference. Account Engagement does not provide any further support for configuring this.

Firefox and newer versions of Internet Explorer block access to custom fonts that are requested from third-party domains. For example, custom fonts sitting on example1.com would be blocked if example2.com was to try to use them. These protections prevent fonts sitting on your web server from being used on your Account Engagement forms and landing pages. In this article we'll show you how to grant Account Engagement permission to use your fonts through an Apache configuration change. For Adobe Fonts, fonts.com, and typography.com users, we'll also show you how to grant permission through these services.

Common Error Related to Custom Fonts:
"Access to font at 'XXX"' from origin 'XXX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

.htaccess Configuration

Add the following to the .htaccess file either in your root web directory or the directory serving your font files:

<FilesMatch ".(otf|ttf|eot|woff)$">
SetEnvIf Origin "^http(s)?://(.+.)?(pardot.com|yourdomain.com)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

You'll need to replace yourdomain.com with the primary part your Account Engagement tracker domain. For example, if your tracker domain is www2.company.com, you'll use company.com in the configuration.

Adobe Fonts Configuration

Follow the instructions found here:

⇥ https://helpx.adobe.com/fonts/user-guide.html/fonts/using/add-fonts-website.ug.html

typography.com Configuration

If you use typography.com to serve your fonts, the configuration needed to give Account Engagement permission is simple:
○ Log in to typography.com
○ Navigate to the project that contains the fonts you'd like to use in Account Engagement
○ Click Domains and then Add a domain
○ Add *.pardot.com
○ Click Save Changes
If *.yourdomain.com is not included in the list of domains, click Add a domain and add your full Account Engagement tracker domain. Adding the Account Engagement domain is necessary for previews inside the application, as well as Account Engagement-powered pages served over HTTPS.
○ Click Save Changes
Note: If you would rather grant individual Account Engagement domains instead of using the wildcard, you'll need to add go.pardot.com, pi.pardot.com, and preview.pardot.com

Custom Fonts in Forms and Landing Pages

When you have granted Account Engagement permission to use your fonts, you can load the fonts to your forms and landing pages through Layout Templates. Two of the more common ways are to use an external stylesheet or an @font-face declaration.

○ External stylesheet reference

If a CSS stylesheet containing your custom fonts already exists, you can add the reference to the "Layout" tab of your layout template within the <head> tag.

○ @font-face declaration

You can directly input your custom font to the "Layout" tab of your layout template using the @font-face declaration. Within the <style> tag, specify the font name and location(s). Then to apply the font to elements on an Account Engagement form, refer to the name of the font using the font-family or font shorthand property.

body { font-family: "SampleFont", sans-serif; } #pardot-form { font: normal 13px/120% "SampleFont", sans-serif; }

Note: Custom fonts currently cannot be used with the landing page editor's "Stock Templates" option (drag and drop builder).

Custom Fonts (including Google Fonts) in Email

A few mail clients (but definitely not all) will allow you to import a custom font for use in your HTML emails. The host for the font would need to support importing the font via a CSS @import call in your HTML's <head> section, in existing <style> tags, as below:

<style>
@import url(https://domain.com/path/to/your/font/font-family-name);
</style>

In order to use the font you imported, you'd use the font-family property of a section's style attribute, as below:

<p style="font-family: font-family-name,backup-font-family;">

Note: you'll want to specify a backup font-family for your text to tell the recipient's mail client what font to display if the @import method isn't supported. Currently, the @import method is supported by iOS Mail, Apple Mail, Android's default mail client, and Mozilla Thunderbird. As a best practice, it's unwise to rely on a custom font in an email, as it will display inconsistently across mail clients. Custom fonts in email should be thought of as enhancements, rather than as essential branding elements.