Adding a custom font to a module

Question

How to add a custom font to a module?

Answer

You can add a custom font to the CSS of your module similar to how it is done in  standard CSS. Here is how it's done step by step:

1. Create a CSS file like 'custom.css' under the CSS resources directory "main/resources/css".
2. Define your font in the CSS file. In the below code, the font is saved in a folder called 'fonts' under the CSS resource directory. 
    

   @font-face {
       font-family: 'intro_head_rbase';
       src: url('fonts/fontspring-demo-introheadr-base-webfont.woff2') format('woff2'),
            url('fonts/fontspring-demo-introheadr-base-webfont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
   }
   
   .customDiv{
     font-size: 22px;
     color: #1d1;
     font-family: 'intro_head_rbase';
   }
    

   3. Now in you JSP, you can include and use the created CSS file with the defined fonts

   <template:addResources type="css" resources="custom.css" />
   
   <div class="customDiv">
     This is an example 
   </div>