Written by The Jahia Team
 
Developers
   Estimated reading time:

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>

     

Related links