Best Answer

Downloading a Custom Font

  • 22 September 2023
  • 4 replies
  • 60 views
M
Rank

Anyone know to download and use a custom font in an HTML widget?  I can obtain both an html link and @import for CSS, but can seem to find a place where I can add them to the header or style sheet.

icon

Best answer by alekwo 22 September 2023, 17:58

View original

4 replies

alekwo
Rank
Userlevel 7
Badge +1

@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>

 

-- Alek Oleszkiewicz - linkedin.com/in/aleko
Bfarkas
Rank
Userlevel 7
Badge +4

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!

M
Rank

@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.

alekwo
Rank
Userlevel 7
Badge +1

@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. 

-- Alek Oleszkiewicz - linkedin.com/in/aleko

Reply


Terms & ConditionsCookie settings