otf Font Import and use

Develop, Build & Integrate CMS Development
,
1

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 - Use fonts in HubSpot.
but can’t seem to get the font to show on my page.

2

Any errors in your browser console?

3

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

4

Hey @DavidFJones

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

Edit:

Maybe there are insights to be gained from this post?

5

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');}

6

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!

7

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.