CTA Not Loading Custom Font

[shawn-wm]

Following the instructions line-for-line on this page: https://knowledge.hubspot.com/website-pages/use-fonts-in-hubspot#add-your-google-font-to-a-cta, but still am unable to get the CTA to load the new font.

It feels like there is a piece missing in the tutorial, because the screenshot of the CTA UI shows only a single line of code in the Custom CSS field, which I'm fairly certain it also needs a reference to the uploaded file (Marketing -> Files & Templates -> Files) but I cannot figure out what that missing piece is.

[himanshurauthan]

Hello @shawn-wm, 

So as I analyzed your query I realized, there could be two reasons:

• First, the CSS is applied but the font is not available on the website and hence a default fallback is being applied
• Second, the CSS is not being applied.

I think it's the first one, If possible could you please share the link to the webpage and the CTA text for me to have a look?

Also please make sure you have followed these steps before applying your own CSS: https://knowledge.hubspot.com/website-pages/use-fonts-in-hubspot#use-custom-fonts

Regards,

[shawn-wm]

Did you get a chance to read my response?

[shawn-wm]

• Re: the font not being available on the website -- it was loaded through Marketing -> Files and Templates -> Files (the direct URL used when clicking "Copy URL" is https://20957649.fs1.hubspotusercontent-na1.net/hubfs/20957649/Fonts/AvenirNextBold.woff2)

• The CSS not being applied -- I'm not convinced it's the correct CSS in the first place. The tutorial shows a screenshot that simply displays (in the Custom CSS memo field) a single attribute: font-family. How would it know what font-family to use if there was no declaration of that @font-face, also in CSS? Yet, the screenshow shows no custom @font-face declaration / reference to a font ttf/woff/woff2 file)

• Even if I ignore the screenshot in the tutorial and write the CSS myself to include the  @font-face declaration, it still doesn't work.

I don't have an example of it to share, because I can't get it to look right (the reason for this post), and so haven't yet placed on our site anywhere that is publically accessible. These are the two examples I've tried in Custom CSS thus far:

doesn't work

(what the tutorial tells you to do) also doesn't work

[himanshurauthan]

Hello @shawn-wm,

So I've shared the issue with my team and we feel that the code is missing something while loading the custom code.

We'll get back to you once we've tested everything.

[shawn-wm]

Anything yet?

[himanshurauthan]

Hello @shawn-wm,

Apologies for the delayed response. So here are some steps that you can follow and they will help you to load the custom font in CTA:

Step 1: Folder structure.

Step 2: In the style.css file:

Step 3: Include style.css into HTML.

I hope this will resolve your query.

Best regards,

[shawn-wm]

It's not clear what this is doing. The instructions I've been following are listed under 

Use a custom font in a CTA

However, it looks like you're describing a workaround to implement a CTA as a complete page via Marketing > Files & Templates > Design Tools.

I'm fine with workarounds but this workaround is incomplete, so it's still not clear what needs to be done to then place this on 3rd party page (which is what I intended with the CTA in first place).

To reiterate: the goal is to leverage Hubspot's CTAs (Marketing > Lead Capture > CTAs) to quickly get code to embed on a 3rd party page for CTA tracking, so I need to be able to customize the font that is used on the CTA itself.

[himanshurauthan]

Hello @shawn-wm,

Would it be possible for you to provide me with a screen recording of the issue you're facing?

[ahi]

Hi there 

Were you able to resolve this issue? I am also wanting to update the CSS for the CTA but cannot seem to find the CTA folder within Design Tools. 

Thanks