Click Here to view this article as a PDF.
Author: Kristenson, Joel
Last Updated: 2016-08-23
Overview
This article walks through the steps to import a Google Web font into your email template. Test your email a lot on different clients and devices prior to sending because not all email clients support Google Fonts and you may not get the intended results you’re going after.
Tip: If you have any trouble with this, call our live support 1-866-909-8700. Also, watch this video for a quick tutorial on using the Trail Blazer email composer.
Steps
Open the email composer in your database (either by creating a mass email campaign or creating a single template). In my example I created a new template from the Templates list.
Once the composer is open, click on the [Source] button in the upper-left.
Add style tags to the start of the email by typing in:
<style>
</style>
Here’s my example (I also added a table for a bit more structure for adding my content):
Next you’ll want to have a font in mind to use from Google Fonts (https://fonts.google.com/?authuser=1). In my example I will use the “Pacifico” font which I think it’s pretty great.
After you pick on out you’ll enter this code between the style tags you created, but replace ‘YOUR+GOOGLE+FONT+HERE’ with the name of the font you chose:
@import url(https://www.fonts.google.com/css?family=YOUR+GOOGLE+FONT+GOES+HERE);
My example prior to inserting my font type:
Note: If your font is more than just one word e.g. Open Sans, you’ll need to add a + symbol where the space(s) would be. For instance family=Open+Sans);
My finished example is below for the importing portion of this task, where I imported the Pacifico font type:
That finishes the import part, now you’ll need to add the font-family & style code into the different sections of your email where you want it to display i.e. Tables/Cells/Paragraphs/Etc. In my example I added it to the only Table Cell I had in my template where all of my text will go.
The code you’ll use:
Style=”font-family: ‘YOUR GOOGLE FONT NAME HERE’;”
My finished example:
Once everything is in place, click on the [Source] button again to go back to the preview screen of the email composer.
My example is below with the Pacifico Google Font style in action. Click [Save] if you’re happy with the results.
Finish composing your email, and then you can click the [Preview] button to see how the email will look (in email clients that support Google Web Fonts).
My finished example as view in IE:
Save and Close once you’re finished. If you ever make a mistake and need to revert back to a previous version you can click the [Saved Copies] button at the top of the composer.
The related resources below provide useful information related to the email feature.
Related Resources
Article: How to Access and Use the Standard Trail Blazer Email Templates as a Starting Point for Template Creation and Mass E-Mail Campaigns
Article: How to Upload Documents to your System Gallery such as PDF’s, Spreadsheets, Audio Clips, Image Files, Etc.
Article: How to Create a Hyperlink around a Screenshot of your Video and Link to the Video from your Trail Blazer Email Template
Article: Sending Out Test Emails
Article: How to Create a Hyperlink around a Screenshot of your PDF Newsletter and Hyperlink it to the PDF Document
Article: How to Create a Custom Thank-You Auto-Responder Email with Merge Fields for your Online Donation Form
Article: How to Find Duplicate Contact Records by Identical *Primary* Email Address, and Automatically Merge them Together
Article: Configuring your From and Reply Email Address Settings
Article: From and Reply To Email Addresses for Mass Email
Article: How to Create Custom Email Responders for Specific Events – New 2016 Feature Upgrade
Article: How to Cancel a Mass Email Campaign as it’s Going Out & How to Reschedule a Queued Email Campaign
Article: Deleting an Email Campaign
Article: Exporting Email Addresses from 3rd Party Mass Email Systems – Notes on CAN-SPAM Policies
Article: How to Create Trackable Links in your Email Campaigns, and How to Analyze those Statistics after the Eblast Goes Out
Article: Sample Custom Email Signup Form to Get your Started
Article: Sample HTML Email Templates with Inline CSS
Article: Standard Email Template – 700px width
3rd Party Article: Mobile Responsive Email Template – ConstantContact Reference
3rd Party Article: Email Clients that Support Web Fonts
Free Tool: Microsoft Expressions Web4 – HTML Editor
Video: Donation Auto Responders with Merge Fields
Video: Eblasts Create and Send Eblasts – Includes Image Management
Video: Scheduled Emails
Video: Eblasts – Setting people up to receive test (draft) emails
Video: Thank you’s using mass email
Trail Blazer Live Support
Phone: 1-866-909-8700
Email: support@trailblz.com
Facebook: https://www.facebook.com/pages/Trail-Blazer-Software/64872951180
Twitter: https://twitter.com/trailblazersoft
* As a policy we require that you have taken our intro training class before calling or emailing our live support team.
Click here to view our calendar for upcoming classes and events. Feel free to sign up other members on your team for the same training.
* After registering you’ll receive a confirmation email with the instructions for how to log into the GoToMeeting session where we host our live interactive trainings.
* This service is included in your contract.
