Can someone explain how to add custom fonts to a non-developer?

[Anonymous]

I would like to be able to use custom fonts, but I'm not sure exactly where to make this happen in our CSS and how. 

Thanks!

Greg

[Anonymous]

Hi Greg,

You can achive this using @font-face rule in CSS.

Sample code:

@font-face {
font-family: 'AauxProBold';
src: url('/rs/xxxxx/images/aauxprobold0.eot');
src: url('/rs/xxxxx/images/aauxprobold0.eot?#iefix') format('embedded-opentype'),url('/rs/xxxxx/images/aauxprobold0.woff') format('woff'),url('/rs/xxxxx/images/aauxprobold0.ttf') format('truetype'),url('/rs/xxxxx/images/aauxprobold0.svg#aauxprobold0') format('svg');
font-weight: normal;
font-style: normal; }

You can assign the font family as below,

h1{font-family: 'AauxProBold';
font-size:40px;
line-height:42px;
color:#bbd5ef;}

Note: there are some online font face generators which can be used to generate fonts in a required format and corresponding CSS.

Hope this helps.

Thanks,
SK

[Anonymous]

Hi,

I'm not sure where that is supposed to go? Again, I'm a non-developer, so anything that walks through step-by-step would be of great help. Thanks!

Best,
Greg

[Anonymous]

Hi Greg,

You can refer the link below for step by step instruction,

http://info.regalix.com/how-to-add-custom-fonts-in-marketo-templates.html

Thanks,
SK

[Anonymous]

Is there a way to do this within a specific landing page in the design studio and not in a template?

[Anonymous · Accepted solution]

Greg,

you can do this by adding the CSS file into landing page instead of template,

Here are the steps,

Continue till step 4 from the above link,
step5: Edit the landing page
step6: Drag drop a HTML element and paste the CSS on it.

use the font reference where ever required.

Thanks,
SK

[Anonymous]

Wow! Thank you so much for this post. It helped immensely!