Adding Fonts on landing page? - Landing Page Design | Community
Skip to main content
A
Anonymous
January 23, 2015
Solved

Adding Fonts on landing page? - Landing Page Design

  • January 23, 2015
  • 7 replies
  • 5707 views
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.
Best answer by
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);

7 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".
A
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!
A
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);
    A
    Anonymous
    January 23, 2015
    Adam is on fire!!!!   kudos!
    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?

    A
    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).

    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;

    }

    Robb Barrett
    A
    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

    Robb_Barrett
    Robb_Barrett
    Level 10
    May 30, 2017

    This is what worked for me.

    Robb Barrett
    Terms & ConditionsAccessibility statement

    Loading footer...