Adding Fonts on landing page? - Landing Page Design | Community
Skip to main content
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
New Participant
May 30, 2017

This is what worked for me.

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

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