My uploaded custom fonts don't work on a Theme Template. Please advice.

[Anonymous]

Hello,
I would like to ask you for advice how to get my Custom Font working on my Theme Template.
I followed all the steps provided from this thread - Regalix Marketo Services: How to add custom font to Marketo templates and the font still didnt worked on my side.

1. Coverted the font;
2. Uploaded it to the platform - The converted .eot, .svg, .ttf and .woff formats;
3. Updated the CSS @font-face with the correct URL paths as shown from the tutorial link and pasted into the Theme Template <style></style> tags.

Here is an example of the URL of which I pointed for the @font-face :
('/rs/786-LBD-533/images/FuturaBT-BoldCondensed.eot');
I have even tried adding the full url path but still didnt resolved the issue for me.

Tried downloading and uploading different font but it still didnt changed after changing the font-family in the CSS

And when I check the console error - here is what I get as an error - https://app-ab29.marketo.com/rs/786-LBD-533/images/FuturaBT-BoldCondensed.ttf 403 (Forbidden).

When I try with @import Google Fonts - the fonts are changed for me without any issues. But when I try upload custom font, the changes doesnt seem to work.

Please if you can advice me how to make custom fonts upload work since I tried various things and none of them worked for me.
Thanks in advance.
Best Regards.

[Grégoire_Miche2]

Hi Greg,

pls snd the URL of an LP based on this template.

-Greg

[Jay_Jiang]

Use your cname domain name instead of the app-ab29 one

[SanfordWhiteman]

The problem likely lies in ​how you're testing ​and ​what you're expecting ​-- not so much in any truly surprising behavior.

As Jay mentions, the fact that you're seeing a 403 means you're testing a private URL (secured by your Marketo login) outside of the Marketo UI.  URLs like app-<pod name>.marketo.com can't be used outside of the UI. 

You can, ​if you insist, use the public Marketo-branded LP URL

  na-<pod name>.marketo.com/lp/<Munchkin ID>/<page name>.html

but this is highly inadvisable. You want to properly brand your pages by using

  go.iab.com/<page name>.html

which you do already have set up correctly.

What that blog post (which is sorely out of date) fails to mention is that, without specific technical steps which I will not belabor here, ​you should not expect Marketo-hosted fonts to work in the Marketo LP Editor and the framed LP Preview UI.  Rather, you should open the approved LP in its own window to decide whether the fonts will render properly for the public.

[Anonymous]

Hello, thank you all for the advices you give me.

This is what I have done by far, please correct me if I did something wrong there.
You can check my attached images of how I have imported the fonts there.

This is the Approved Landing Page - http://go.iab.com/Membership_page.html

Thank you once again for the help.
Hope we can find a solution.

Snapshots:
Capture1 — imgbb.com
Capture2 — imgbb.com
Capture3 — imgbb.com

Best regards.

[SanfordWhiteman]

Please paste the images inline in your message, not in separate attachments.

Attachments don't work in all versions of the Community and make navigation difficult.

[Jim_Thao7 · Accepted solution]

Seems to work fine when I assign the fonts as an inline style to your header for both fonts  Looking at your code, it doesn't seem like you assigned this font-family to any of your elements.

[Anonymous]

Thank you all for the advices. The issue was resolved by putting the font families inline instead of inserting them in a class.
I appreciate the all the help.
Thank you again!
Best regards!