@mhigbee 

I’m not sure if I fully understand where the problem is. 

Generally, in the Custom Stylesheet, you first add the font definition (like this):

@font-face {

    font-family: 'Tiempos';

    src: url("https://my1.content-cms.com/6f28ae20-732e-4d5d-be9a-c46cd8a2cf05/dxdam/86/86d494ed-caba-47af-b3d2-05d28d34f620/TiemposFineWeb-Medium.woff")

}  

Then, also in the CSS, you define a class that uses this font, for example:

.products-hero h1 {

    font-family: 'Tiempos';

}

And then in the HTML widget, you assign this class to an element… like this:

<section class="products-hero">
​​​​​​​   <h1>
       Custom font
   </h1>
</section>

Shameless self-plug, but if you are using a Google Font as your custom font by chance, Fark.Tools has this natively built in for you.

Otherwise, the above info is spot on!

@alekwo - Thanks for the detailed response. I was using an Adobe font. I had to make an individual font-face import statement for each style in the font type.

@mhigbee import statements can only be used at the very beginning of a CSS file - they basically need to be the first statements in a stylesheet.

I’m not sure if that’s doable when we use custom CSS, as Docebo may be merging our custom styles with their own. 

Still, you can open the URL that is imported and copy-paste the imported style content into the Custom Style text and have it in-line. 

The only drawback is that in case Adobe changes something in the future on their side (in the content that is getting imported), you will need to update the stylesheet yourself.