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

Improve this question
6
  • 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
    Commented Dec 17, 2018 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
    Commented Dec 17, 2018 at 13:51
  • @Aidan I have updated the url to be without the 'http:' part. Thanks.
    – kt10208
    Commented Dec 17, 2018 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
    Commented Dec 17, 2018 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
    Commented Dec 18, 2018 at 9:42

3 Answers 3

Reset to default
1

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.

Improve this answer
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?

Improve this answer
0

The only best way I found to do this is by encode the font file to base64 and use this method in writing @font-face:

@font-face {
     font-family:'yourfontname'; 
     src: url(data:font/YOUR FONT TYPE;charset=utf-8;base64,YOUR BASE64 STRING HERE);
}

then you will be able to use your font... other ways you will get a lot of errors in CORS and Block Origin

** use https://www.giftofspeed.com/base64-encoder/ to encode your font file

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .