Pardot Knowledge Base

Using Custom Fonts in Pardot

Last Updated: Feb 25, 2016 | Print this Article
 
  Woah there, partner! This is an advanced topic that assumes a solid understanding of web server configuration. This article is given for your reference. We do not provide any further support for configuring this.

Concept

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 pardot.com would be blocked if example.com was to try to use them. These protections prevent fonts sitting on your web server from being used on your Pardot forms and landing pages. In this article we'll show you how to grant Pardot permission to use your fonts through an Apache configuration change. For Typekit, fonts.com, and typography.com users, we'll also show you how to grant permission through these services. You can find help for setting up custom fonts on other webservers here.

.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 Pardot tracker domain. Example: if your tracker domain is www2.company.com, you'll use company.com in the configuration.

Typekit Configuration

If you use Typekit to serve your fonts, the configuration needed to give Pardot permission is simple:
  1. Log in to Typekit
  2. Select the kit containing the fonts you want to grant Pardot access to
  3. Click Launch Kit Editor
  4. Click Kit Settings
  5. Add *.pardot.com and your full Pardot tracker domain to the list of domains. If *.yourdomain.com is already included in the list, you will not need to add your tracker domain. Adding the Pardot domain is necessary for previews inside the application, as well as Pardot-powered pages served over HTTPS.
  6. Click Save Settings
  7. Click Publish
Note: If you would rather grant individual Pardot domains instead of using the wildcard, you'll need to add go.pardot.com, pi.pardot.com, and preview.pardot.com

fonts.com Configuration

If you use fonts.com to serve your fonts, the configuration needed to give Pardot permission is simple:
  1. Log in to fonts.com
  2. Navigate to Manage Web Fonts
  3. Expand the project that contains the fonts you'd like to use in Pardot and click Add & Edit Domains
  4. Add *.pardot.com and your full Pardot tracker domain to the list of domains. If *.yourdomain.com is already included in the list, you will not need to add your tracker domain. Adding the Pardot domain is necessary for previews inside the application, as well as Pardot-powered pages served over HTTPS.
  5. Click Save Domain
Note: If you would rather grant individual Pardot domains instead of using the wildcard, you'll need to add go.pardot.com, pi.pardot.com, and preview.pardot.com

typography.com Configuration

If you use typography.com to serve your fonts, the configuration needed to give Pardot permission is simple:
  1. Log in to typography.com
  2. Navigate to the project that contains the fonts you'd like to use in Pardot
  3. Click Domains and then Add a domain
  4. Add *.pardot.com
  5. Click Save Changes
  6. If *.yourdomain.com is not included in the list of domains, click Add a domain and add your full Pardot tracker domain. Adding the Pardot domain is necessary for previews inside the application, as well as Pardot-powered pages served over HTTPS.
  7. Click Save Changes
Note: If you would rather grant individual Pardot 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 Pardot 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. External stylesheet reference for custom fonts
  • @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). Using @font-face in layout templates
Then to apply the font to elements on a Pardot 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; }


For a list of common styling changes that customers make to their Pardot forms, see CSS for Forms.

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

Custom 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.

Need more? Start a conversation with other Pardot users in our Success Community