1

I am working on a Pardot landing page which shows a simple form. Now the customer wants us to use a custom font on the landing page for which a *.woff file was provided to us.

I uploaded the font file to Pardot (Marketing>Content>Files) and now am in the middle of editing the Layout Template for my landing page but I can't get the form on my landing page to start using my custom font.

Here are the first 14 lines of my Layout Template where I declare my uploaded font.

<!DOCTYPE html>
<html lang="en">
<head>

<!-- Loading custom fonts -->
<style type="text/css">
@font-face {
  font-family: "test_font";
    src: url('http://go.pardot.com/blahblahblah/blahblah/fontname.woff') format('woff');
}
#pardot-form {
font-family:'test_font';
}
</style>

Any ideas as to why the form on my landing page is not using this font to display the names of the fields??

EDIT: Here are the errors I get from the console:

CSS3115: @font-face failed cross-origin request. No Access-Control-Allow-Origin header.

CSS3119: No fonts available for @font-face rule

  • 1
    Does anything show in the browser developer console when you load the page? One thing that jumps out is that you're trying to load the font over http. If the page is on https, the browser will block loading the font over http. It's better to write the url as url('//go.pardot...'), then the protocol used for the font will match the page itself – Aidan Dec 17 '18 at 13:15
  • 1
    I think you are getting this error. "No 'Access-Control-Allow-Origin' header is present on the requested resource." You might need to update .htaccess based on this documentation: help.salesforce.com/… – Selim Sevim Dec 17 '18 at 13:51
  • @Aidan I have updated the url to be without the 'http:' part. Thanks. – kt10208 Dec 17 '18 at 16:05
  • SelimSevim Errors that I get are: CSS3115: 'At sign here'font-face failed cross-origin request. No Access-Control-Allow-Origin header. CSS3119: No fonts available for @font-face rule – kt10208 Dec 17 '18 at 16:06
  • 1
    I think that is not allowed to store your font files in Pardot and use them like that but I am not 100% sure. – Selim Sevim Dec 18 '18 at 9:42
0

@SelimSevim is correct. It is not allowed to store font files on Pardot and use them. There is an idea to support this: https://success.salesforce.com/ideaView?id=0873A000000E5I0QAK

What threw me off was this: https://help.salesforce.com/articleView?id=pardot_content_files_supported.htm&type=5 Here it says that font files are supported in Pardot Files.

Admins is it possible to mark SelimSevim's comment as the answer?

0

What I have done in the past to get around the cross-origin block is to base-64 encode the actual font files and add them directly in the css file @font-face declaration instead of linking to a font file. This will make your css file larger but works pretty well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.