otf Font Import and use

[DavidFJones]

Hey everyone,

I'm trying to add a custom font provided by a client to a few pages, and I'm wondering if the otf font format is supported?

I've followed this guide - https://knowledge.hubspot.com/cos-general/use-custom-fonts-on-blog-posts-or-pages#:~:text=your%20hos...
but can't seem to get the font to show on my page.

[SoporteAM]

Can someone help me find out how to import custom fonts to Hubspot (for landing pages and marketing emails?) My email is soporte@andresmorera.com

Thanks.

[isleybear]

Any errors in your browser console?

[DavidFJones]

I have an XMLHttpRequest CORS error and and api get error, but nothing that I can see related to fonts.

Errors:

Access to XMLHttpRequest at 'https://cp.hubspot.com/content-tools-menu/api/v1/tools-menu/permissions?portalId=xxxxxxx' from origin 'https://preview.hs-sites.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://cp.hubspot.com/content-tools-menu/api/v1/tools-menu/permissions?portalId=xxxxxxx net::ERR_FAILED

[Kevin-C · Accepted solution]

Hey @DavidFJones 

How are you implementing the fonts? @font-face or Another method?

Edit:

Maybe there are insights to be gained from this post?

[DavidFJones]

Wow. So while reading the post you linked to, I found out the issue was that I was trying to call my font face file type using "otf" instead of "opentype".

Thanks for the help!

For reference, what my code looks like is as follows - 

@font-face { font-family: 'DINNextRoundedLTPro-Regular';  src: url('https://xxxxxxx.com/fonts/Linotype%20-%20DINNextRoundedLTPro-Regular.otf') format('opentype');}

[Kevin-C]

The absolute bane of working with font formats!

I hope we'll see the browser make that decsion on it's own in the very near future!

Glad it helped!