Custom fonts path in CSS

Develop, Build & Integrate CMS Development
1

Hi there,

I’m trying to load custom fonts from a folder in my Hubspot theme in my CSS, but I can’t get it to work. Inside my Hubspot theme I’ve created a folder named “fonts” and added the font files to this folder. In my main.css file (inside a “css” folder), I’ve added the paths for @font-face in many different ways, for example with a relative path “../fonts” or with {{ portal_asset_url }}, but or I’m getting a 404 error, or I’m getting a “No 'Acces-Control-Allow-Origin” error.

Hope somebody can help me out how to do this. Thank you so much!

2

Hi @RoFiks

Have you tried get_asset_url instead of portal_asset_url ?

We have custom fonts set up on one of our portals and the below setup works fine:

@font-face {
 font-family: "MyCustomFont";
 font-weight: 400;
 font-style: normal;
 src: 
 url( {{ get_asset_url('../fonts/MyCustomFont.woff2') }} ) format('woff2'), 
 url( {{ get_asset_url('../fonts/MyCustomFont.woff') }}) format('woff');
}
3

Hi @evaldas,

Thank you so much! This is working :slightly_smiling_face: It was my scss compiler that didn’t accept the get_asset_url function.

Thanks for your help!