Skip to main content
Anonymous
January 23, 2015
Solved

Adding Fonts on landing page? - Landing Page Design

Im building my landing pages and I was wondering that if there is a way that I can add my own font?

Thanks in advance!
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Accepted solution
January 23, 2015
Hey Herb > For a custom font, you can upload the files to Marketo (woff, ttf, eot). I'd recommend using a service like Font Squirrel to do that. Then you just create a CSS file including the information and change out your H1, P, LI definitons in the css file. Or you can utilize the Google Font API via JS or @import to include the font (instead of uploading to Marketo)

Here's an example of what that CSS would look like....

  
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
View in thread

9 replies

David_Mason1
David_Mason1
Level 3
January 23, 2015
You can change it by viewing the html and changing it there. You need minor HTML knowledge... or Google something like "html font code".
Translate
Anonymous
January 23, 2015
Can I change those fonts to any type? I was planning on using Open sans...not sure if I have to upload it somewhere before I could use it.

Thanks!
Translate
Anonymous
Accepted solution
January 23, 2015
Hey Herb > For a custom font, you can upload the files to Marketo (woff, ttf, eot). I'd recommend using a service like Font Squirrel to do that. Then you just create a CSS file including the information and change out your H1, P, LI definitons in the css file. Or you can utilize the Google Font API via JS or @import to include the font (instead of uploading to Marketo)

Here's an example of what that CSS would look like....

  
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
Translate
    Anonymous
    January 23, 2015
    Adam is on fire!!!!   kudos!
    Translate
    Benjamin_Ortiz1
    Benjamin_Ortiz1
    Level 4
    January 17, 2017

    After I've uploaded the ttf file to marketo how would I go about adding that to a guided landing page template?

    Translate
    Anonymous
    May 9, 2017

    Hi Adam - I just went to Font Squirrel and downloaded a set of font files. They are all .otf files - a format that wasn't in your list. Will importing those files work? (I've never done anything in this area before).

    Translate
    Robb_Barrett
    Robb_Barrett
    Level 10
    May 9, 2017

    Step 1. Get all of the fonts in one standard format

    Step 2: convert to EOT, TTF, WOFF

    Step 3: Upload them into your design studio

    Step 4: create a .css file that looks like below:

    Step 5: Link in that CSS file as such:  <link href="landing1.gehealthcare.com/rs/005-SHS-767/images/ge-inspira.css" rel="stylesheet" type="text/css">

    CSS File:

    @charset "UTF-8";

    /* CSS Document */

    @font-face {

      font-family: ge-inspira-serif;

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Regular-v01.eot") format("eot");

      /* IE9 Compat Modes */

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Regular-v01.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Regular-v01.WOFF") format("woff"), /* Modern Browsers */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Regular-v01.ttf") format("truetype");

      /* Safari, Android, iOS */

      font-weight: normal;

      font-style: normal;

    }

    @font-face {

      font-family: ge-inspira-serif;

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Italic-v01.eot") format("eot");

      /* IE9 Compat Modes */

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Italic-v01.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Italic-v01.woff") format("woff"), url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Italic-v01.ttf") format("truetype");

      font-weight: normal;

      font-style: italic;

    }

    @font-face {

      font-family: ge-inspira-serif;

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Bold-v01.eot") format("eot");

      /* IE9 Compat Modes */

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Bold-v01.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Bold-v01.WOFF") format("woff"), url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Bold-v01.ttf") format("truetype");

      font-weight: bold;

      font-style: normal;

    }

    @font-face {

      font-family: ge-inspira-serif;

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-BoldItalic-v01.eot") format("eot");

      /* IE9 Compat Modes */

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-BoldItalic-v01.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-BoldItalic-v01.woff") format("woff"), url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-BoldItalic-v01.ttf") format("truetype");

      font-weight: bold;

      font-style: italic;

    }

    @font-face {

      font-family: ge-inspira-sans;

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Regular-v01.eot") format("eot"), /* IE9 Compat Modes */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Regular-v01.woff") format("woff"), /* Modern Browsers */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Regular-v01.ttf") format("truetype");

      /* Safari, Android, iOS */

      font-weight: normal;

      font-style: normal;

    }

    @font-face {

      font-family: ge-inspira-sans;

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Italic-v01.eot") format("eot"), /* IE9 Compat Modes */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Italic-v01.WOFF") format("woff"), /* Modern Browsers */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Italic-v01.ttf") format("truetype");

      /* Safari, Android, iOS */

      font-weight: normal;

      font-style: italic;

    }

    @font-face {

      font-family: ge-inspira-sans;

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Bold-v01.eot") format("eot"), /* IE9 Compat Modes */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Bold-v01.woff") format("woff"), /* Modern Browsers */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Bold-v01.ttf") format("truetype");

      /* Safari, Android, iOS */

      font-weight: bold;

      font-style: normal;

    }

    @font-face {

      font-family: ge-inspira-sans;

      src: url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-BoldItalic-v01.eot") format("eot"), /* IE9 Compat Modes */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-BoldItalic-v01.woff") format("woff"), /* Modern Browsers */ url("landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-BoldItalic-v01.ttf") format("truetype");

      /* Safari, Android, iOS */

      font-weight: bold;

      font-style: italic;

    }

    Translate
    Robb Barrett
    Anonymous
    May 19, 2017

    Hi Robb -

    Thank you - and sorry for the delay! I had already uploaded them into Design Studio. Are you saying they can't be used as is, in the .OTF format?

    Best,

    Denise

    Translate
    Robb_Barrett
    Robb_Barrett
    Level 10
    May 30, 2017

    This is what worked for me.

    Translate
    Robb Barrett
    Terms & ConditionsAccessibility statement

    Loading footer...