Getting bold custom fonts using Velocity

Questions
1

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

The CSS contains:

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:

Montserrat.ttf
Montserrat-Bold.ttf

Is this enough or is there some other setup required?
2

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.

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

test.pdf (14.8 KB)

3

Thanks for the update; this is not the same as being able to use to get the bold font or 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?

4

Hi Roddy,

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

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

5

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