1. Home
  2. Postcards
  3. Edit the Code
  4. How to Change the Font in an Exported Email Template

How to Change the Font in an Exported Email Template

Are you looking to change the font in your Postcards email template? This tutorial will guide you step-by-step.

Overview of the Tutorial

We’re going to create a Postcards template, download the files, and change the code so that it uses a new font.

The outcome will be a Postcards template that uses a typeface from Google Fonts.

Prerequisites

Video Version

Steps

1. Create the template

First, go to the Postcards App and create a template. Make sure you’re logged in or create an account before you start because you need to be logged in to download the files.

This video shows you how easy it is to create a template using the free modules.

 

2. Export the files

Now that the template is ready, we want to download the files so we can make changes.

In the top right corner of the app, there is an export button that will download a zip of the files onto your computer. This video shows you how easy it is to download the template files.

 

Unzip those files into a folder you want to work in, and it should look like this:

Unzip those files

If you open the index.html file it should look like this in your browser:

Open the index.html

3. Get ready to edit the HTML

We have our template files and now we want to edit them and update the font.

Right-click the index.html file and open it with Notepad++. It’ll look something like this:

Get ready to edit the HTML

If you’re struggling to open the file in a text editor, you can check out this link for additional help.

You should see something like this:

Notepad++ text editor view

This is the Notepad++ text editor view. Here you can see the contents of the HTML file and make changes.

Next, add the font you want to use.

4. Get the font and add it to your HTML file

Go to the Google Fonts website and select the font you want to use. For this tutorial, we’re going to use Noto Serif.

To add this font to your project, click the “select font” button and add the “link” tag to your HTML code.

Noto Serif font from Google Fonts

Before you copy the link tag, you need to change one thing. Click the “customize” tab in the new pop up section that appeared after you pressed “select this font.”

Make sure the “bold 700”

Make sure the “bold 700” is selected, we’ll be needing this.

Now go back to the embed tab and copy the link.

Embed tab

Add that link in your index.html file in the <head> element. Your Notepad++ view should look like this:

<head> element

This tells the HTML document to include the Noto Serif font from Google Fonts into the document to be available for use in the code.

5. Start changing the code to change the font

Now that our HTML document has the Noto Serif font included, we can start styling our text with it.

To change the default font to our new font, we’ll have to update each place where the code uses the default font.

The default font in this file is called “Fira Sans,” and we can find all the occurrences of “Fira Sans” by pressing “control + F” in Notepad++ and typing in “Fira Sans.” It’ll look something like this:

The default font in this file is called “Fira Sans”

Next, replace all the text where it says “Fira Sans” to our new font, “Noto Serif.”

We do that by pressing the “Replace” tab in the new window, filling out the “Replace with” input and pressing the “Replace” button like in this screenshot:

“Replace” tab

You can see that I replaced the first line with “Noto Serif,” while the lines below it use “Fira Sans.”

You can press “Replace all” if you don’t want to replace each line individually.

Once all “Fira Sans” is replaced with “Noto Serif,” save the file and open it. You’ll see the same template but with a different font.

“Fira Sans” is replaced with “Noto Serif,”

You might notice that some text isn’t bold like the original template. This is because the original template font used a font size of “500” while our new font doesn’t have that font size, only “400” and “700” which is why we selected the “700” option when selecting the new font.

To fix this issue, we need to replace all instances of “500” with “700” like we did with the font text and save the file. Once this is done, you’ll have completed the task of changing the font in your Postcards template!

Before and after code

Updated on January 22, 2020

Was this article helpful?

Related Articles

Leave a Comment