Thymeleaf with springboot Templates do not have access to fonts

Viewed 418

Using thymeleaf I am trying to render the Html and generate PDF. But the fonts is not getting applied. Please any help.

Here is where template is located inside the springboot application:

-> resources
---> templates
-------> the file_template.html
-------> fonts/

Here is the template, I specifically put the head where I define the Style of the template:

<head>
  <title>Invoice</title>
  <style>
    *,
    *::after,
    *::before {
      margin: 0;
      padding: 0;
      box-sizing: inherit;
    }

    @font-face {
      font-family: 'Museo Sans';
      font-weight: 100;
      font-style: Normal;
      src: url('/fonts/MuseoSans-100.otf');
    }

    @font-face {
      font-family: 'Museo Sans';
      font-weight: 300;
      font-style: Normal;
      src: url('/fonts/MuseoSans-300.otf');
    }

    @font-face {
      font-family: 'Museo Sans';
      font-weight: 500;
      font-style: Normal;
      src: url('/fonts/MuseoSans_500.otf');
    }

    @font-face {
      font-family: 'Museo Sans';
      font-weight: 700;
      font-style: Normal;
      src: url('/fonts/MuseoSans_700.otf');
    }

    html {
      box-sizing: border-box;
    }

    body {
      font-family: "Museo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
      background-color: #ffffff;
      min-height: 100vh;
    }
  </style>
</head>

I even try this one:

<head>
  <title>Invoice</title>
  <style>
    *,
    *::after,
    *::before {
      margin: 0;
      padding: 0;
      box-sizing: inherit;
    }

    @font-face {
      font-family: 'Museo Sans';
      font-weight: 100;
      font-style: Normal;
      src: url("fonts/MuseoSans-100.otf") format("otf");
    }

    @font-face {
      font-family: 'Museo Sans';
      font-weight: 300;
      font-style: Normal;
      src: url("fonts/MuseoSans-300.otf") format("otf");
      
    }

    @font-face {
      font-family: 'Museo Sans';
      font-weight: 500;
      font-style: Normal;
      src: url("fonts/MuseoSans_500.otf") format("otf");
    }

    @font-face {
      font-family: 'Museo Sans';
      font-weight: 700;
      font-style: Normal;
      src: url("fonts/MuseoSans_700.otf") format("otf");
    }

    html {
      box-sizing: border-box;
    }

    body {
      font-family: "Museo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
      background-color: #ffffff;
      min-height: 100vh;
    }
  </style>
</head>

Please any help.Thank You

0 Answers
Related