Search code examples
cssfontsfont-facemarketo

Custom font on Marketo landing pages only displaying on Mac?

We are trying to launch a new landing page template on Marketo, and have specified a non-standard font to use on the pages (Gotham SSm). However, the font is only showing up in browsers (Chrome, Firefox, Safari) on Mac. Those same browsers on PC (and also IE) show Helvetica/Arial.

Here is the code we have specifying to add the font:

<link href="https://www.instant.ly/css/ce/fonts/149381/AD116F7D4F9AF23F3.css" rel="stylesheet" type="text/css">

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<style type="text/css">

@font-face {
   font-family: "Gotham SSm";
}

#bodyId {
background: #fff;
font-family: "Gotham SSm", Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
margin: 0px;
padding: 0px;
}

And here are the WIP landing page test pages:

http://pages.instant.ly/LP---Instantly-Templates_LP---Faux-Site---V2.html

What could be the cause for this issue, and how can we solve it?

Solution

  • In another forum someone helpfully responded by letting me know the font name should be "Gotham SSm A". Changing the name in the CSS seems to have resolved the issue.