Skip to content

14 Comments

  1. Meg Bogart
    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.

    Reply

    • Mat O'Flynn
      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!

      Reply

  2. Liam Smith
    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;
    }

    Reply

    • Mat O'Flynn
      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?

      Reply

      • Liam Smith
        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

        Reply

        • Mat O'Flynn
          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)

          Reply

          • Liam Smith
            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 🙂

          • Mat O'Flynn
            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 🙂

  3. Danielle Kort
    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

    Reply

    • Mat O'Flynn
      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

      Reply

      • Danielle Kort
        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;

        }

        Reply

        • Mat O'Flynn
          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

          Reply

          • Danielle Kort
            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

          • Mat O'Flynn
            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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *