CMS Development

DavidFJones
Member

otf Font Import and use

SOLVE

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.

0 Upvotes
1 Accepted solution
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

otf Font Import and use

SOLVE

Hey @DavidFJones 

 

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

 

Edit:

Maybe there are insights to be gained from this post?

View solution in original post

0 Upvotes
6 Replies 6
SoporteAM
Member

otf Font Import and use

SOLVE

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.

0 Upvotes
isleybear
Member

otf Font Import and use

SOLVE

Any errors in your browser console?

DavidFJones
Member

otf Font Import and use

SOLVE

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
0 Upvotes
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

otf Font Import and use

SOLVE

Hey @DavidFJones 

 

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

 

Edit:

Maybe there are insights to be gained from this post?

0 Upvotes
DavidFJones
Member

otf Font Import and use

SOLVE

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
Recognized Expert | Partner
Recognized Expert | Partner

otf Font Import and use

SOLVE

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!

0 Upvotes