Servoy Forum

Posted: **Mon Nov 01, 2021 9:30 am**

Am not having any luck getting the <strong> tags to work in the HTML template for a Velocity report when using fonts in the custom fonts folder.

The CSS contains:

Code: Select all: font-family: 'Montserrat', 'Verdana', serif;

and it is picking up the font nicely; however, it is not using bold. I have the following in the fonts sub-folder:

Code: Select all: Montserrat.ttf Montserrat-Bold.ttf

Is this enough or is there some other setup required?

Posted: **Mon Nov 01, 2021 10:37 pm**

Nothing special, except you have to declare the font in the CSS, and use the internal name of the font (in the case of Montserrat, it looks like it is "Montserrat Bold" with no hyphen)
For example the following template gives the PDF attached.

Code: Select all: <!DOCTYPE html>  <html lang="en"> <head> <title>Font test</title> <style> .container { margin: auto; } .montserrat { font-family: 'Montserrat', serif; font-size: 24pt; } .montserrat-bold { font-family: 'Montserrat Bold', serif; font-size: 24pt; } @page { size: letter landscape; margin: 1.4in .4in .6in .4in; } </style> </head> <body> <div class="container"> <p class="montserrat">Monserrat font</p> <p class="montserrat-bold">Montserrat bold font</p> </div> </body> </html>

Posted: **Wed Nov 03, 2021 4:57 am**

Thanks for the update; this is not the same as being able to use <strong> to get the bold font or <i> for italics; this looks like an explicit assignment of the font to a class. Is it possible to assign a font family for it to pick up the correct custom font as it would if using something like a serif?

Posted: **Wed Nov 03, 2021 10:05 am**

Hi Roddy,

Yes, you can assign a font-family to a regular class like so:

Code: Select all: <!DOCTYPE html>  <html lang="en"> <head> <title>Font test</title> <style> body { font-family: 'Montserrat', serif; font-size: 24pt; } strong { font-family: 'Montserrat Bold', serif; font-size: 24pt; } @page { size: letter landscape; margin: 1.4in .4in .6in .4in; } .container { margin: auto; } </style> </head> <body> <div class="container"> <p>Monserrat font</p> <p><strong>Montserrat bold font</strong></p> </div> </body> </html>

Hope this helps.

Posted: **Thu Nov 04, 2021 5:00 am**

I hadn't thought of that; thanks so much.

Servoy Forum

Getting bold custom fonts using Velocity

Getting bold custom fonts using Velocity

Re: Getting bold custom fonts using Velocity

Re: Getting bold custom fonts using Velocity

Re: Getting bold custom fonts using Velocity

Re: Getting bold custom fonts using Velocity