How to Use Any Google Web Font on Leadpages
At Drip Email Templates we really believe in branding! Which is why we wanted to create a guide that would help you use your brand’s Google Web Font, that may not otherwise be available, on your Leadpages. After following this simple 5 step tutorial your Leadpages (and Drip Email Templates) will be styled with your brand’s font.
Step 1: Select Your Google Web Font
To select your Google Web Font head over to: https://fonts.google.com and select or search for your brand’s font. In the example below we picked the Google Web Font ‘Alef’.
After you’ve found your brand’s web font you can optionally choose your font size and weight by hovering your curser over the font name. For this example we chose the defaults.
Step 2: Copy the font codes
Now that you’ve found your desired font you next need to copy the two font codes that Google provided into a note or text editor. This will help us prepare the code that will be pasted into the Custom CSS section of your Leadpage.
Step 3: Paste the font codes into our example code below
To prepare the code that will be pasted into the custom CSS section of your Leadpage I included a snippet of code that we’ll modify in this step to ensure that your brand’s Google Web Font displays on your Leadpage.
To make it work, in your note or text editor, copy and paste the code below into a new note or text editor (or below the previous codes you copied in step 2):
We now need to replace the references to the Google Web Font Alef in the provided snippet (unless your brand’s Google Web Font is Alef) with your Google Web Font’s codes. To do this, highlight the first line of code in the example snippet and delete or paste over it with the first code that you copied into your note or text editor in step 2. For example, if your brand’s font is Zilla Slab you’d replace the first line of code in the example snippet with the code:
The last modification that we have to make to the example snippet is to replace every reference to the font-family: ‘Alef’, sans-serif; with your font’s family name. For example, if your brand’s Google Web Font is Zilla Slab you would replace every reference to the font-family: ‘Alef’, sans-serif; in the provided example snippet with the code below:
Step 4: Paste your newly modified example code snippet into the custom CSS section of your Leadpage
Your custom CSS is now prepared! The last step of this tutorial is to paste your newly modified example snippet code (your custom CSS) into the custom CSS section of your Leadpage. To do this, in the Leadpages drag and drop builder click on ‘Styles’ in the left menu, followed by the button to enable custom css. Now, paste your modified example snippet code into the custom CSS box and update and publish your Leadpage.
Step 5: Add New Text Widgets to Your Drag and Drag Leadpage
If you’re using an existing drag and drop Leadpages template that has pre-populated text, you’ll want to replace the the pre-populated text with a new text widget.
Unfortunately when you published your Leadpage at the end of step 4, the existing text on the Leadpage didn’t update to your brand’s Google Web Font. To fix this you simply have to drag a new text widget onto the page and republish the page for your new Google Web Font to display.
Your Leadpage is Now Using Your Brand’s Google Web Font!
Congrats! You should now be the proud owner of a Leadpage that includes your brand’s Google Web Font.
As a bonus, you can now even use the Leadpages drag and drop text editor to adjust your font sizes, stylize your text such as by bolding or underlining as well as other modifications without any further custom code! That’s a big win in our opinion!
Important Note: If you experience any trouble or need one-on-one help we’re always available
Run into any issues? Leave a comment below and we’ll do our best to get back to you right away!
Or, if you need to make even more custom edits to your Leadpages, the Drip Email Templates team can help! We not only build custom Drip Email Templates to match your branding but also design custom Leadpages so that your brand identity is synced across all mediums.
August 15, 2017 @ 4:16 pm
This didn’t exactly work. It did work for the computer that I had the font installed. When I went into preview mode my custom font (Amatic) loaded properly. But if I went to another computer that did not have the font installed on the computer then my font didn’t show.
August 28, 2017 @ 3:53 pm
Hi Meg!
Thanks for checking out the tutorial and I’m sorry that I didn’t see this sooner. I created a test Leadpage (ensuring that the font Amatic wasn’t already installed on my computer) and it worked great for me. Attached is a screenshot of my test Leadpage: https://uploads.disquscdn.com/images/86582271056828f82f0a7e93ddb39b4390cab0c48de30ee7230b6fec926a435b.png
Also, this is the code that I entered into the custom CSS section of my Leadpage:
body{
width: 100%;
background-color: #ffffff;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
font-family: ‘Amatic SC’, cursive;
}
h1{
font-weight: normal;
margin-top:0;
margin-bottom:14;
padding-top:0;
padding-bottom:0;
line-height: 1.1em;
font-family: ‘Amatic SC’, cursive;
}
p,h2,h3,h4{
margin-top:0;
margin-bottom:12;
padding-top:0;
padding-bottom:0;
line-height: 1.6em;
font-family: ‘Amatic SC’, cursive;
}
ul,ol,li{
margin-left: 20;
margin-right: 0;
padding-left: 0;
padding-right: 0;
font-weight: normal;
font-family: ‘Amatic SC’, cursive;
li a{
width: 300px;
height: 100px;
margin: auto 0;
display: block;
background: red;
font-family: ‘Amatic SC’, cursive;
}
Hope you were able to get it working on your computer!
September 26, 2017 @ 2:37 am
Hey Mat, great site.
What’s the trick with Drip email templates? The above doesn’t quite work; if you try to use the Link method, the template builder throws an error and if you try the following it looks like it defaults back to basic;
/* Global */
* {
font-family: ‘Lato’, sans-serif;
box-sizing: border-box;
font-size: 14px;
line-height: 1.5;
}
October 2, 2017 @ 12:37 am
Hey Liam, thanks so much! Excited to launch a few more tutorials this month 🙂
In my experience, you just have to ensure that you drag a new text module onto your Leadpage. For example, existing text modules from imported themes don’t automatically show up after the custom CSS has been added. Were you able to get your Google Web Font to show up after you placed a new text module and re-published your Leadpage?
October 6, 2017 @ 2:18 am
Cheers Mat. I was more after Drip specific as it’s editor and process is different from LeadPages. That said; from your article and https://litmus.com/blog/the-ultimate-guide-to-web-fonts I’m pretty sure I’ll be able to get it going
October 6, 2017 @ 2:28 am
That is a great article, thanks for sharing it! Modifying the font of Drip’s default ‘Simple’ email template is very similar where you just need to update the ‘font-family’ with your font name. That’s exactly what I did to include a few additional fonts to Drip’s default ‘Simple’ template which is what I call the ‘Simple + Font Selection’ Drip email template (found here: https://dripemailtemplates.com/shop/drip-email-templates/simple-font-selection)
October 6, 2017 @ 2:30 am
Not going to lie, that’s the one I’m trying to modify. Thanks for making it a freeby 🙂
October 6, 2017 @ 2:32 am
Absolutely! And I’m planning to add more of the Leadpages fonts to it in the future as well to save people a step 🙂
December 12, 2017 @ 4:36 pm
This didn’t work for me unfortunately. I tried using Pacifico, in cursive and nothing changed. Thank you anyway for trying to help with this surprising issue in Leadpages
December 12, 2017 @ 4:55 pm
Hi Danielle, thanks so much for reaching out! I was able to get the Google Web Font Pacifico to show up for me (I attached a screenshot of how I did it in two different ways). Unfortunately, adding a new text or header Leadpages widget didn’t automatically show the Pacifico font when I published the page, but when I added an HTML widget it did work!
The first line of text in the screenshot was done by adding the following HTML into a HTML widget:
body {
font-family: ‘Pacifico’, cursive;
font-size: 48px;
}
Making the Web Beautiful!
And the second line of text was done by adding the following HTML into an HTML widget below the first HTML widget:
Test text using the Google Web Font Pacifico
The second method is definitely the easiest / quickest but I wanted to share both just in case! Hope this helps and please don’t hesitate to reach out if you have any questions!
https://uploads.disquscdn.com/images/be8cf2aa7450d3510e43727c1bbf4bb6f4949100ed25782a25d4c25db23a1aaf.png
December 14, 2017 @ 3:23 pm
Thanks for looking at this. OK, I’ll try your suggestion. I’m not a coder just stumbled upon this article when searching for a solution. Would the entire thing look like this (below)?:
body {
font-family: ‘Pacifico’, cursive;
font-size: 48px;
}
body{
width: 100%;
background-color: #ffffff;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
font-family: ‘Pacifico’, cursive;
}
h1{
font-weight: normal;
margin-top:0;
margin-bottom:14;
padding-top:0;
padding-bottom:0;
line-height: 1.1em;
font-family: ‘Pacifico’, cursive;
}
p,h2,h3,h4{
margin-top:0;
margin-bottom:12;
padding-top:0;
padding-bottom:0;
line-height: 1.6em;
font-family: ‘Pacifico’, cursive;
}
ul,ol,li{
margin-left: 20;
margin-right: 0;
padding-left: 0;
padding-right: 0;
font-weight: normal;
font-family: ‘Pacifico’, cursive;
li a{
width: 300px;
height: 100px;
margin: auto 0;
display: block;
background: red;
font-family: ‘Pacifico’, cursive;
}
December 14, 2017 @ 3:33 pm
No worries! It’s my goal to make that easy for everyone 🙂
The custom CSS that I used was:
body{
width: 100%;
background-color: #ffffff;
margin:0;
padding:0;
font-family: ‘Pacifico’, cursive;
h1{
font-weight: normal;
margin-top:0;
margin-bottom:14;
padding-top:0;
padding-bottom:0;
line-height: 1.1em;
font-family: ‘Pacifico’, cursive;
p,h2,h3,h4{
margin-top:0;
margin-bottom:12;
padding-top:0;
padding-bottom:0;
font-family: ‘Pacifico’, cursive;
ul,ol,li{
margin-left: 20;
margin-right: 0;
padding-left: 0;
padding-right: 0;
font-weight: normal;
font-family: ‘Pacifico’, cursive;
li a{
width: 300px;
height: 100px;
margin: auto 0;
display: block;
background: red;
font-family: ‘Pacifico’, cursive;
The code you included in your last message (included below) is almost there!
body {
font-family: ‘Pacifico’, cursive;
font-size: 48px;
}
body{
Next, it just needs the actual ‘text portion’ which would make it look like this:
body {
font-family: ‘Pacifico’, cursive;
font-size: 48px;
}
Insert text here
December 15, 2017 @ 1:28 pm
Hey Mat,
So I pasted the above text into the custom CSS section and this is what showed up. Maybe I shouldn’t be just pasting it all into the CSS section? Any specific trick to this? Thanks again for all your help.
Danielle
https://uploads.disquscdn.com/images/e2e1cacdc77c2ff0ad12552877735e1ba9d53825e9cf8653fc5c986e8627ecb4.png
December 16, 2017 @ 8:45 pm
Hi Danielle! That’s exactly it — it’s perfect if the top part goes into the custom CSS section of the Leadpage but you’ll want to put this code:
body {
font-family: ‘Pacifico’, cursive;
font-size: 48px;
}
Insert text here
Into an HTML widget that you drag onto the page. You’re very close so I hope this helps get things showing up the way you like 🙂