CMS Development

RoFiks
Member

Custom fonts path in CSS

SOLVE

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!

0 Upvotes
1 Accepted solution
evaldas
Solution
Guide | Platinum Partner
Guide | Platinum Partner

Custom fonts path in CSS

SOLVE

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

 


✔️ Did this post help answer your query? Help the community by marking it as a solution.

View solution in original post

0 Upvotes
2 Replies 2
evaldas
Solution
Guide | Platinum Partner
Guide | Platinum Partner

Custom fonts path in CSS

SOLVE

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

 


✔️ Did this post help answer your query? Help the community by marking it as a solution.

0 Upvotes
RoFiks
Member

Custom fonts path in CSS

SOLVE

Hi @evaldas,

 

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

 

Thanks for your help!