Taxi For Email
  • Getting started
    • Common Terminology and Definitions
    • Creating your first email
    • Structuring your Taxi for Email account
    • Which Account Structure Applies to You?
    • Previewing and testing your email
    • Exporting your email
  • Add-ons
    • Communication add-ons
      • Setting up the Microsoft Teams add-on
      • Setting up the Slack add-on
    • Image add-ons
      • Setting up and using the Akamai add-on
    • Translation add-ons
      • Set up details for the Transifex add-on
      • Setting up MemoQ in Taxi
      • Setting up Transifex in Taxi
      • Translation Spreadsheet add-on
      • Using MemoQ Add On in Taxi
      • Using the Transifex Add On in Taxi
      • What Version to make for Transifex Translation
  • Connectors
    • AWS S3
      • Exporting an email to AWS S3
      • Setting up the AWS S3 connector
    • Acoustic (IBM Silverpop) connector
      • Exporting an email to Acoustic (IBM Silverpop)
      • Setting up personalisation for Acoustic (IBM Silverpop)
      • Segmentation in Taxi
      • Setting up the Acoustic (IBM Silverpop) connector
      • Taxi and the Acoustic (IBM Silverpop) connector
    • Adobe Campaign connector
      • Building Taxi Email Design Systems for Adobe Campaign
      • Exporting an email to Adobe
      • Exporting to Adobe Campaign File connector
      • How Taxi for Email and Adobe Campaign connect
      • Setting up personalisation for Adobe Campaign
      • Setting up segmentation for Adobe
      • Setting up the Adobe Campaign connector
    • Amazon SES
      • Exporting an email to Amazon SES
      • Setting up the Amazon SES Connector
      • Using Dynamic Content with the Amazon SES connector
    • Blueshift Connector
      • Exporting an email to Blueshift
      • Setting up personalisation for Blueshift
      • Setting up segmentation for Blueshift
      • Setting up the Blueshift connector
      • Taxi and the Blueshift connector
    • Braze connector
      • Braze Preheaders
      • Exporting an email to Braze
      • Setting up personalisation for Braze
      • Setting up segmentation for Braze
      • Setting up the Braze connector
      • Taxi and the Braze connector
    • Campaign Monitor connector
      • Exporting an email to Campaign Monitor
      • Setting up the Campaign Monitor connector
    • Connectors
      • Connectors in Taxi
    • Dotdigital connector
      • Exporting an email to Dotdigital
      • Setting up the Dotdigital connector
    • Eloqua connector
      • Exporting an email to Eloqua
      • Setting up personalisation for Eloqua
      • Setting up segmentation for Eloqua
      • Setting up the Eloqua connector
      • Taxi and the Eloqua connector
    • Emarsys
      • Exporting an email to Emarsys
      • Setting up the Emarsys connector
    • Episerver
      • Exporting an email to Episerver Smart Campaign
      • Exporting to the Episerver Transactional connector
      • Setting up personalisation for Episerver
      • Setting up segmentation for Episerver
      • Setting up the Episerver Smart Campaign connector
      • Setting up the Episerver Transactional connector
      • Taxi and the Episerver connector
    • Epsilon connector
      • Exporting an email to Epsilon
      • Setting up the Epsilon connector
    • Google Cloud Platform (GCP)
      • Exporting an email to Google Cloud Platform (GCP)
      • Setting up personalisation for Google Cloud Connector
      • Setting up segmentation for Google Cloud Platform
      • Setting up the Google Cloud Platform (GCP) connector
      • Taxi and the Google Cloud connector
    • Hubspot Connector
      • Exporting an email to Hubspot
      • Setting up personalisation for Hubspot
      • Setting up segmentation for Hubspot
      • Setting up the Hubspot Connector
      • Taxi and the Hubspot connector
    • Iterable
      • Exporting an email to Iterable
      • Iterable Segmentation support
      • Setting up personalisation for Iterable
      • Segmentation in Taxi
      • Setting up the Iterable connector
      • Taxi and the Iterable connector
    • Klaviyo Connector
      • Exporting an email to Klaviyo
      • Setting up personalisation for Klaviyo
      • Setting up segmentation for Klaviyo
      • Setting up the Klaviyo connector
      • Taxi and the Klaviyo Connector
    • Mailchimp connector
      • Exporting an email to Mailchimp
      • Setting up the Mailchimp connector
    • Marketo Connector
      • Exporting an email to Marketo
      • Setting up personalisation for Marketo
      • Segmentation in Taxi
      • Setting up the Marketo connector
      • Taxi and the Marketo Connector
    • Omeda Connector
      • Exporting an email to Omeda
      • Setting up personalisation for Omeda
      • Setting up the Omeda connector
      • Taxi and the Omeda connector
    • Optimove
      • Exporting an email to Optimove
      • Setting up the Optimove connector
    • Oracle Responsys connector
      • Exporting an email to Oracle Responsys
      • Setting up personalisation for Responsys
      • Setting up segmentation for Responsys
      • Setting up the Oracle Responsys connector
      • Taxi and the Responsys connector
    • Pardot Connector
      • Exporting an email to Pardot
      • Setting up Pardot (Salesforce OAuth) Connector
      • Setting up segmentation for Pardot
      • Setting up the Pardot Connector
    • S3 Webex Campaign
      • Exporting an email to S3 Webex Campaign
      • Setting up personalisation for S3 Webex Campaign
      • Setting up segmentation for the S3 Webex Campaign Connector
      • Setting up the S3 Webex campaign connector
    • SAP Connector
      • Exporting an email to SAP
      • Setting up the SAP connector
    • Sailthru Connector
      • Exporting an email to Sailthru
      • Exporting an email to the Sailthru Template connector
      • Setting up personalisation for Sailthru
      • Segmentation in Taxi
      • Setting up the Sailthru Template connector
      • Setting up the Sailthru connector
      • Taxi and the Sailthru Connector
    • Salesforce Marketing Cloud connector
      • Exporting an email to Salesforce Marketing Cloud
      • SFMC Subject Line Updates
      • Salesforce Preheader
      • Setting up personalisation for Salesforce Marketing Cloud
      • Segmentation in Taxi
      • Setting up the Salesforce Marketing Cloud Exact Target connector
      • Setting up the Salesforce Marketing Cloud connector - Content Builder
      • Taxi and the Salesforce Marketing Cloud connector
    • Sendgrid Connector
      • Export all Mailings in a Project to Sendgrid
      • Exporting an email to Sendgrid Campaign Legacy
      • Exporting an email to Sendgrid Transactional
      • Exporting an email to the Sendgrid Marketing for Single Sends connector
      • Sendgrid Connector
      • Setting up personalisation for Sendgrid
      • Segmentation in Taxi
      • Setting up the Sendgrid Marketing for single sends connector
      • Setting up the Sendgrid connector
    • Sparkpost
      • Exporting an email to Sparkpost
      • Setting up the Sparkpost connector
    • Yes Marketing
      • Exporting an email to Yes Marketing
      • Setting up the Yes Marketing connector
    • Messagebird Engagement Platform
      • Setting up the Messagebird Engagement Platform (MEP) connector
      • Exporting an email to Messagebird Engagement Platform (MEP)
    • CleverTap connector
      • Setting up the CleverTap connector
      • Exporting using the CleverTap connector
  • Creating and editing an email
    • Creating and editing an email
      • Conversations in Taxi
      • Creating and exporting an email
      • Expectations in Taxi
      • How the module includer works
      • How to build an email in the editor
      • Reusable modules
      • Revision History in Taxi
      • What's new in the new Taxi for Email
  • Dynamic content, segmentation and personalisation
    • Dynamic content, segmentation and personalisation
      • Flexible Segmentation
      • Personalisation folders
    • Personalisation
      • Bulk upload Personalisation fields
      • Setting up personalisation fields
      • Using personalisation in a mailing
      • What is Personalisation
    • Segmentation
      • Creating and managing Segment Sets
      • Creating and managing Single Segments
      • Exporting Segmented Mailings - Via Connectors
      • Exporting Segmented Mailings Manually
      • Previewing Segments
      • Subject Line Segmentation
      • Using Segmentation in a mailing
      • What is Segmentation
  • Email Design Systems
    • Brands
      • Configuring Brands
      • Creating a Brand
      • Setting Brand Fields: Brands
      • What are Brands
      • What are sub-templates
    • Built-in Taxi Email Design Systems
      • Built-in Email Design Systems email client support
      • Using the Modern Standard Email Design System to create an email
    • Custom Email Design Systems
      • Custom-built Email Design System email client support
      • Understanding Email Design Systems uploader error messages
      • Updating an existing custom Email Design System
      • Uploading a custom Email Design System to Taxi
      • Uploading an Email Design System using a zip file
      • Using custom fonts in an email
    • Email Design System Owners
      • Setting up your Email Design System owner
      • Viewing your Email Design System owner in a Version
    • Email Design Systems
      • Check where your Email Design System is being used
      • Email Design System Module Statistics
      • Getting started with Taxi Email Design Systems
      • Managing your Email Design System
      • Setting Version Defaults
      • Setting a default Email Design System
      • Using built-in and custom Email Design Systems
      • What is an Email Design System Guide
      • What is an Email Design System
    • Layouts
      • How will Layouts help my team?
      • What are Layouts?
  • Email and Taxi for Email best practice
    • Dark Mode
      • Dark Mode Best Practice and Tips
      • Different Email Clients in Dark Mode
      • What is Dark Mode?
    • Email and Taxi for Email best practice
      • Adding images to your email
      • How to get Google Chrome Console Logs
      • Learn how to structure your account: Part 1
      • Learn how to structure your account: Part 2
      • Learn how to structure your account: Part 3
      • Learn how to structure your account: Part 4
      • Image saving:
      • Using ICS iCal files in Taxi
      • Using Taxi with ESP code
      • Why are my images not displaying?
      • Why is Gmail clipping my email?
  • Feeds & Link Tracking
    • Feeds
      • Extracting Data from your HTML Feed
      • Extracting the data from your feed
      • Feeds Configuration
      • Setting up a custom feed in Taxi for Email
      • Setting up a feed in Taxi for Email
      • Setting up search helpers when using feeds
      • Using Feeds in the Taxi editor
      • What is a feed
    • Fresh Relevance
      • Setting up Fresh Relevance in your Taxi for Email account
      • What is Fresh Relevance
    • Link Tracking
      • Configuring link tracking profiles
      • Creating a Tracking Profile
      • Creating a custom link tracking profile
      • Custom Attributes in Link Tracking Profiles
      • How to add Tracking Profiles to Link Groups
      • Link Groups
      • Link Tracking Manager - href settings
      • Link Tracking: Connector Types
      • Tracking Profiles and Link Groups
      • What is Link Tracking Manager
    • Liveclicker
      • Setting up the Liveclicker Integration on Taxi
      • What is Liveclicker
  • Manage Your Organisation Settings
    • CDN
      • CDN notification settings
      • Hosting images with the Taxi CDN
      • How to check your CDN usage
    • Manage Your Organisation Settings
      • Joining a company account
      • Support availability
      • Updating your profile
      • Whitelist Taxi IP Addresses
    • Security 2
      • Logging into a Taxi for Email account
      • Resetting a password
      • Setting up Enterprise Password Rules
      • Setting up and managing two-factor authentication
      • Two-factor Authentication (2FA)
  • Master Versions and Inheritance
    • Inheritance 2
      • Inheritance and managing inheritance
  • Misc
    • Misc
      • Branding Sub Templates: Setting Brand Fields
      • Can I re-add modules I've already removed?
      • Do I have to use the same template each time for my versions?
      • Exporting an email to Bronto
      • How do I build a master version from a built in or custom modular template?
      • How do I connect to Salesforce Marketing Cloud?
      • How do I create a new user in Taxi?
      • How do I download HTML documents?
      • How do I give a team the correct permissions?
      • How do I give a user full permissions?
      • How do I preview my emails so I can see how they will appear in mobile or on desktop?
      • How do I re-order the modules in my master version?
      • How do I remove modules I no longer need?
      • How do I send someone a notable link?
      • How do I structure my organisation into teams?
      • How do I view with images off using the preview pane?
      • How to Manage your Password
      • Setting up Fresh Relevance
      • Setting up personalisation for Marketo
      • Setting up the Bronto connector
      • To give a team specific permissions, follow these steps:
      • To remove Admin rights follow these steps:
      • Untitled article
      • What is the difference between an admin and a non admin user?
      • Who is responsible for setting up our Taxi account and adding new users etc.?
  • Partners
    • Partners
      • Manage your partner and sub accounts
      • Manage your partner and sub-accounts
      • What is a partner account
  • Projects, Mailings and Versions
    • Inheritance 1
      • Inheritance and managing inheritance
    • Mailing name conventions
      • Setting up mailing name conventions
      • Using mailing name conventions
    • Mailings
      • Creating and managing Mailings
    • Parent Versions and Child Versions
      • Creating and using Parent Versions
      • Synchronising content between the Parent version and other versions
    • Project Groups
      • Creating and managing Project Groups
    • Projects, Mailings and Versions
      • Understanding, Projects, Mailings and Versions
      • Using the Search function in Taxi
    • Projects
      • Creating and managing Projects
    • Version Sets
      • Creating and managing Version Sets
    • Versions
      • Creating and managing Versions
  • Setting Up Taxi
    • Setting Up Taxi
      • Setting up a Taxi for Email account
  • Support Info
    • Support Info
      • Browser support
      • Taxi and VAT
      • Taxi for Email pricing
      • Why you might not be receiving test emails from Taxi
      • Where is Taxi hosted?
  • Taxi for Email API
    • Taxi for Email API
      • API endpoints
      • Taxi for Email API
  • Testing and approving your emails
    • Testing and approving your emails
      • Connect your Litmus account to Taxi
      • Creating test email addresses
      • Exporting HTML
      • Exporting Screenshots
      • Exporting a PDF
      • Exporting a hosted URL
      • Logging out of Litmus in Taxi
      • Testing your email in Litmus
      • Using Email on Acid to test your emails
  • Users, Team Access, Permissions and Organisation Settings
    • Permissions
      • Connector Permissions
      • Email Design System Permissions
      • Personalisation Permissions
    • Security 1
      • Setting up IP Whitelisting
      • Setting up Image Domain Whitelisting
    • Teams
      • Creating and managing Teams in Taxi
      • Team Access and Permissions
      • Team and Global Permissions
    • Users, Team Access, Permissions and Organisation Settings
      • Bulk Uploading Users
      • SSO Set Up
    • Users
      • Admin & Non Admin Users
      • Creating and managing users in Taxi
      • Users access and permissions
Powered by GitBook
On this page
  • Email client support
  • CSS set up
  • Using it in your HTML
  • Working with Google Fonts
  • Cross-Origin Resource Sharing (CORS)
  1. Email Design Systems
  2. Custom Email Design Systems

Using custom fonts in an email

PreviousUploading an Email Design System using a zip fileNextEmail Design System Owners

Last updated 1 year ago

When creating your own HTML Email Design System, you may want to use a custom font beyond the standard ones available. When working with brand guidelines where you need to use a custom font, it's always best to use a custom font with a solid fallback in place.

Email client support

The first consideration to take into account when working with custom fonts is that email client support is patchy. The following email clients support custom fonts:

  • Apple Mail

  • iOS Mail

  • Samsung Mail

  • Outlook.com

It's important to define a font-stack when using custom fonts. This should include some standard system fonts to make sure that your email renders in clients which don't support custom fonts.

'OpenSansBold', Helvetica, Arial, sans-serif

To host your custom fonts, you can either use a service such as Google Fonts, or host them yourself. We can also host them for our customers - we'll need to see proof of your licence before we can do this.

For situations where your custom fonts aren't supported, you should select fallbacks that are included on the . These fallbacks define what fonts will be displayed if the email client doesn't support custom fonts.

CSS set up

The most reliable way to include a specific font into your email is to use @font-face. Below is an example of this in action:

@font-face { font-family: 'OpenSansLight'; src: url('https://yoururl.com/opensans.woff2') format('woff2'), url('https://yoururl.com/opensans.woff') format('woff'); }

When working with Outlook, we need to wrap this @font-face in a @media tag. This is because Outlook 2007, 2010 and 2017 don't support them.

Using it in your HTML

To use a custom font in an Email Design System, you should define it as you would when working with a standard font. An example of this would be:

<td style=”font-family: 'OpenSansBold', Helvetica, Arial, sans-serif;”>

Working with Google Fonts

You can use Google Fonts in your emails built in Taxi. To make sure it renders properly in an email, you'll need to get the direct link for the font, in a .woff2 format.

  1. Head to fonts.google.com, and pick your webfont Once you've selected this, click on the black bar at the bottom of the screen, and copy the link to the font.

  2. Open Chrome, Safari or Internet Explorer, and paste this URL into the browser This will serve up a CSS stylesheet which has a .woff2 link, which you can copy into your Email Design System.

Cross-Origin Resource Sharing (CORS)

In plain English, this means that a source (i.e. the email client rendering the email) makes a request to a domain that is different to the sending domain of the email.

By setting the CORS correctly, this will tell the email client to verify this request. This is usually set up in the hosting tool that you're using.

When we host fonts for you, we can set this header up for you.

Follow the CSS set up instructions

Cross-Origin Resource Sharing () is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

majority of machines
above
CORS