Adding Fonts on landing page? - Landing Page Design

[Anonymous]

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!

[Robb_Barrett]

This is what worked for me.

[Anonymous]

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]

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]

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]

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

[Anonymous]

Adam is on fire!!!!   kudos!

[Anonymous · Accepted solution]

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]

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]

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