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
  • 5695 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

Robb_Barrett
Robb_Barrett
New Participant
May 30, 2017

This is what worked for me.

Robb Barrett
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
New Participant
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

Benjamin_Ortiz1
Benjamin_Ortiz1
New Participant
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
January 23, 2015
Adam is on fire!!!!   kudos!
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
    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!
    David_Mason1
    David_Mason1
    New Participant
    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".
    Terms & ConditionsAccessibility statement

    Loading footer...