Adding a Custom Font in a Training material --- HTML page

hard to say without seeing your HTML code...

@lrnlab here we go! 

If you open the file with .html (sorry i couldn’t attach the .html file) it’s the result that I would like, I don’t know though how it should be in the html page conten (since I’ve added the Abel font in the css custom pages)

What font are you trying to use? Is a standard font or something you purchased? I can see on called “Abel” but am not familiar with that.

it’a a Google font. 

In the CUSTOM STYLE i’ve added this, in order to add the font in the platform: 

/* latin */

@font-face {

  font-family: 'Abel';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url(https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE2V9BPQ.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

Not sure if this is the actual font but it looks good on my end

you might just want to add some spacing and margins to pull the text away from the sides..

thank you, how did you do the html coding? 

Only another thing: I’ve tryed to underline the title, and change the color of the line with an orange one, but the html page doesn’t not accept it, it continue to change the color in total black.

Since I’ve found some articles talking about custom fonts (google fonts included) and i’ve added in the custom style as suggested, will be interesting anyway to understand how you can use the settings for adding the new custom font in the training materials

I just dropped your code in the widget as you sent it…

Typically underlining text is in the same colour as the font. Maybe try adding a border or horizontal line and try chain the collar of that instead.

I ran it though a code display tool and it looks like you have the right code...keep in mind that Docebo does not accept all HTML code so this is likely why it is not showing as you designed it. You might need to look at using something like a table and try colouring one the borders...Docebo likes tables.

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Anyone else that knows how to add a custom font into a Training Material HTML? 

I’ve found only the possibility to add to the entire platform the font but not to the html pages

thank you

The issue is that Docebo rips out the style tag so in order to use custom fonts you need to use the external CSS editor to apply them site wide or import the font and apply it where necessary (it’s a best practice to do your styling outside of the html as the platform doesn’t allow certain inline styles). 

Here’s a guide on how to use custom fonts: 
 

Thank you @pmo for the guide and the explanation.

I actually have already seen and set the custom font outside the html page, following the instruction of the guide you’ve shared with me.

I’m missing (and continue to don’t understand) the final passages. 

Once I’ve added the custom font in the Configure Branding & Look here: 

So once I’ve added the font, how can I show this font in the HTML Page? Because I still cannot see it.

And if in the HTML PAGE I just write in the coding the name of the font it doesn’t work.

In the guide you’ve shared with me, I see that they are talking about adding also this to change the font for the entire platform: 

/* Change font for entire platform */ a:not(.zmdi), abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, button, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em:not(.zmdi), embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, iframe, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p:not(.zmdi), pre, q, ruby, s, samp, section, small, span:not(.zmdi), strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var { font-family: Abel !important; }

Well i’ve tryed also to add this code (i dont’ want the font for the entire platform) but it is still not working)

/* Change font for HTML PAGE*/ a:blockquote, body,  code,  div, dl, dt, footer,  h1, h2, h3, h4, h5, h6, header, html, ins, li, ol, q, span, strong, table, tr, tt, u, ul, var { font-family: Abel !important; }

Am I missing some steps? 

thank you

Giulia

Hello everyone, since I’ve found the solution, I’m going to write it here for the ones that maybe one day will have my same issue! 

The problem was that adding the coding of my custom font into Configure branding and look&feel » custom style

my HTML page was not reading the font. The problem was that I was placing the coding in the WRONG page!! 

If you want to add a custom font (and you have already seen the process on what kind of code you have to add --- here the link: Using Custom Fonts in Docebo | Community

then you have to go to Configure branding and look&feel » course player » VDD for the HTML training materials.

Once you’ve added here your custom font, you can go back in your HTML content material page and write the HTML coding! 

Hope this will help! 

Cheers

Giulia