A Pardot Landing Page, Bootstrap & Browser Display Issues

As a general rule, hosting a marketing landing page that is crafted to create leads should be hosted on a company’s primary domain to maximise a google adwords spend. But there are a lot of situations that come across my desk where hosting a landing page on the company’s main domain isn’t necessary or perhaps even possible.

For our clients that are leveraging a marketing automation solution such as Pardot, we can use a well thought out sub-domain directed at their marketing platform.

It seems like a simple solution, just design a beautifully optimised landing page, code it up using your favourite framework or boilerplate (bootstrap in this case), store all of your assets and code on the marketing platform, and your good to go. “Pardot landing page is in the bag” you proclaim after checking the ‘finished’ product…

But then you open Firefox

Oh, great all of those lovely icon fonts aren’t showing. Instead we get a not-so-useful square. We better check Internet Explorer… and it is the same here too.

Time to hit up google!

Google leads to stack overflow (of course) that held enough hints to point me in the right direction.

Opening up Firefox’s developer tools and checking the console logs showed that there was a problem with the icon font loading. What seemed strange to me was that the google hosted font being used for the site body copy loaded perfectly.

Location, location, location

Today I learned, it matters where your fonts are hosted.

To be more specific, it matter where your fonts are hosted in relation to the CSS file that is calling them (at least in the case of @font-face method anyway).

It turns out that some browsers out there (I’m looking at you Firefox and IE) don’t like it when you hard link to a font file, especially when the CSS file and the font are stored on different servers.

For a moment, it felt like my framework dreams where collapsing around me. But then I had another sip of coffee and the world was beautiful again.

The mind numbingly simple solution

One line of code, replace one line of code…

Instead of hosting the four formats of the icon font, bootstrap.min.css and reworking the @font-face to point to the newly hosted fonts, all I needed to do was remove this line of code from my HTML file:

<link href="http://example.com/large-string-of-characters" rel="stylesheet">

And add this in its place:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"  rel="stylesheet">

Now we are loading the bootstrap CSS direct from their CDN, and in turn, loading in the icon font from the same server. Checking the updated HTML in Firefox and IE reveals crisp, resolution independent icons in all their glory.

 

Comments are closed.