SOLVED

Re: Adding Fonts on landing page? - Landing Page Design

Go to solution
Anonymous
Not applicable

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!
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: Adding Fonts on landing page? - Landing Page Design

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 solution in original post

9 REPLIES 9
David_Mason1
Level 3

Re: Adding Fonts on landing page? - Landing Page Design

You can change it by viewing the html and changing it there. You need minor HTML knowledge... or Google something like "html font code".
Anonymous
Not applicable

Re: Adding Fonts on landing page? - Landing Page Design

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!
Anonymous
Not applicable

Re: Adding Fonts on landing page? - Landing Page Design

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);
Anonymous
Not applicable

Re: Adding Fonts on landing page? - Landing Page Design

Adam is on fire!!!!   kudos!
Benjamin_Ortiz1
Level 4

Re: Adding Fonts on landing page? - Landing Page Design

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

Anonymous
Not applicable

Re: Adding Fonts on landing page? - Landing Page Design

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
Level 10

Re: Adding Fonts on landing page? - Landing Page Design

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="http://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("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Regular-v01.eot") format("eot");

  /* IE9 Compat Modes */

  src: url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Regular-v01.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Regular-v01.WOFF") format("woff"), /* Modern Browsers */ url("http://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("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Italic-v01.eot") format("eot");

  /* IE9 Compat Modes */

  src: url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Italic-v01.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Italic-v01.woff") format("woff"), url("http://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("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Bold-v01.eot") format("eot");

  /* IE9 Compat Modes */

  src: url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Bold-v01.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-Bold-v01.WOFF") format("woff"), url("http://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("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-BoldItalic-v01.eot") format("eot");

  /* IE9 Compat Modes */

  src: url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-BoldItalic-v01.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSerif-BoldItalic-v01.woff") format("woff"), url("http://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("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Regular-v01.eot") format("eot"), /* IE9 Compat Modes */ url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Regular-v01.woff") format("woff"), /* Modern Browsers */ url("http://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("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Italic-v01.eot") format("eot"), /* IE9 Compat Modes */ url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Italic-v01.WOFF") format("woff"), /* Modern Browsers */ url("http://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("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Bold-v01.eot") format("eot"), /* IE9 Compat Modes */ url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-Bold-v01.woff") format("woff"), /* Modern Browsers */ url("http://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("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-BoldItalic-v01.eot") format("eot"), /* IE9 Compat Modes */ url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-BoldItalic-v01.woff") format("woff"), /* Modern Browsers */ url("http://landing1.gehealthcare.com/rs/005-SHS-767/images/GEInspiraSans-BoldItalic-v01.ttf") format("truetype");

  /* Safari, Android, iOS */

  font-weight: bold;

  font-style: italic;

}

Anonymous
Not applicable

Re: Adding Fonts on landing page? - Landing Page Design

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
Level 10

Re: Adding Fonts on landing page? - Landing Page Design

This is what worked for me.