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
- Designmodo account
- Text editor like Notepad++ or Visual Studio Code
- Basic understanding of HTML files
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:
If you open the index.html file it should look like this in your browser:
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:
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:
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.
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” is selected, we’ll be needing this.
Now go back to the embed tab and copy the link.
Add that link in your index.html file in the <head> element. Your Notepad++ view should look like this:
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:
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:
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.
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!
