Currently our landing pages support several web fonts, but you may want to add a font that isn't available in our list. Custom fonts can be awesome to have more design control and to closely match your branding. They can take your page to a whole new level.

Luckily we have a solution whereby you can add custom fonts without touching the template code. 

All you need to do is find the font that you would like. We would recommend Google Fonts for a huge library of free fonts that are publicly hosted. Head over to https://fonts.google.com to find your font.

From there you can search for the font that you like and grab a small piece of code to put into Marketo. In the example below we use Open Sans but you should be able to choose any font that's available on Google Fonts to get the same effect.

Select a font, customize the different weights of the typeface that you want to use and then go to the @import tab and copy the code generated in there.

Once you copy that code you can go into your landing page in Marketo. Select the landing page actions option and select "Edit Page Meta Tags" from the dropdown. This allows you to insert custom code to the template.

We're going to be adding to the html in the <head> of the email. All you need to do is copy the Google fonts code in there:

Now the font is hosted in your template and available for you to use. There is one more small piece to add into the Custom HEAD HTML section to actually display the font in your template. Paste the following above the bottom </style> tag:

body {font-family: 'Open Sans', sans-serif;}

You just need to replace Open Sans with the name of the custom font that you chose:

body {font-family: '[font-name]', sans-serif;}

After saving you should see the new font in your landing page:

This should work for the majority of Knak landing pages. If you only see the font showing up in certain places this may be because of the way the stylesheet is set up to use different fonts in different locations. If you want to override these fonts to use your custom font everywhere you just need to modify the custom html that we edited earlier by adding !important after the font-family declaration. So in the case of Open Sans you could adjust it to:

body {font-family: 'Open Sans', sans-serif;!important}

This should override the other font styles so that your custom font shows everywhere.

Did this answer your question?