Getting bold custom fonts using Velocity

Questions and answers on designing your Servoy solutions, database modelling and other 'how do I do this' that don't fit in any of the other categories

Getting bold custom fonts using Velocity

Postby roddy » 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?
roddy
 
Posts: 100
Joined: Mon Oct 26, 2020 12:32 am

Re: Getting bold custom fonts using Velocity

Postby ptalbot » 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>
<!-- HTML5 -->
<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>
Attachments
test.pdf
PDF
(14.81 KiB) Downloaded 104 times
Patrick Talbot
Freelance - Open Source - Servoy Valued Professional
https://www.servoyforge.net
Velocity rules! If you don't use it, you don't know what you're missing!
User avatar
ptalbot
 
Posts: 1654
Joined: Wed Mar 11, 2009 5:13 am
Location: Montreal, QC

Re: Getting bold custom fonts using Velocity

Postby roddy » 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?
roddy
 
Posts: 100
Joined: Mon Oct 26, 2020 12:32 am

Re: Getting bold custom fonts using Velocity

Postby ROCLASI » 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>
<!-- HTML5 -->
<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.
Robert Ivens
SAN Developer / Servoy Valued Professional / Servoy Certified Developer

ROCLASI Software Solutions / JBS Group, Partner
Mastodon: @roclasi
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5438
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: Getting bold custom fonts using Velocity

Postby roddy » Thu Nov 04, 2021 5:00 am

I hadn't thought of that; thanks so much.
roddy
 
Posts: 100
Joined: Mon Oct 26, 2020 12:32 am


Return to Programming with Servoy

Who is online

Users browsing this forum: No registered users and 19 guests

cron