css templates Developer Jahia 7.3 Jahia 8

Adding a custom font to a module


How to add a custom font to a module?



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