Trail Blazer Knowledge Base

 

Home : Email : How to Import a Google Web Font into your Trail Blazer Email Template

Knowledge Base







User:

Password:



Article ID: KB332
Keyword Name: Fonts, Google, Web Font, Style, Email, Compose, Design, Eblast
Created: August 23, 2016
Viewed: 15834

How to Import a Google Web Font into your Trail Blazer Email Template






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.



http://www.us-cert.gov/sites/default/files/images/tip-icon.pngTip: 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

http://www.somebodysattic.org/images/phone%20icon_lower%20rez.jpg  Phone:  1-866-909-8700

http://sisyphus-js.herokuapp.com/assets/email_icon-0f32f4da45c2822cbb02fb36f9b9429e.png   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.



 

Are you ready to learn more? Contact Us