Skip to main content
Answer

Downloading a Custom Font

  • September 22, 2023
  • 4 replies
  • 83 views
M
Novice II

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.

Best answer by alekwo

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

 

4 replies

alekwo
Guide III
Forum|alt.badge.img+1
  • alekwo
  • Guide III
  • Answer
  • September 22, 2023

@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
Bfarkas
Hero III
Forum|alt.badge.img+6
  • Bfarkas
  • Hero III
  • September 22, 2023

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
Novice II
  • mhigbee
  • Author
  • Novice II
  • September 29, 2023

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

Bfarkas
alekwo
Guide III
Forum|alt.badge.img+1
  • alekwo
  • Guide III
  • October 2, 2023

@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
Bfarkas
Terms & ConditionsCookie settingsAccessibility statement