how to add fonts in apostrophe cms theme site.less

Question

I have added fonts in my theme but still getting 404.

import "utils/reset.less";

@apos-ui-font-path: '/modules/theme/public/css/font-awesome/fonts/';
.apos-add-font('roboto', @apos-ui-font-path + 'roboto-regular-webfont');


    // Delete the boilerplate CSS below when you are ready to dive in and customize your sites        
body { background-color: @apos-white;
        }

.main-content {
  margin: 200px auto;
  padding: 20px;
  max-width: 500px;
  color: @apos-white;
  background-color: @apos-primary;
  .apos-drop-shadow;

  .login-link {
    float: right;
    color: @apos-white;
  }

  // Basic rich-text editor styles:
  h3 {
    font-size: 24px;
    margin-bottom: 12px;
  }

  h4 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  strong { font-weight: bold; }
  em { font-style: italic; }
}

Also I have attached my index.js

module.exports = {
  construct: function(self, options) {
    // loads from public/js/site.js of this module
    self.pushAsset('script', 'popper');
    self.pushAsset('script', 'bootstrap.min');
    self.pushAsset('script', 'particles');
    self.pushAsset('script', 'custom');
    // loads from public/css/site.less of this module
    self.pushAsset('stylesheet', 'jquery-3.2.1.min');
    self.pushAsset('stylesheet', 'bootstrap.min');
    self.pushAsset('stylesheet', 'font-awesome/font-awesome.min');
    self.pushAsset('stylesheet', 'style');
    self.pushAsset('stylesheet', 'site');

  }
};

Did i miss something because my fonts are not working with apostrophe cms? or path is incorrect? How can i provide the relative path in theme for fonts

Thanks in Advance

Answer 1

This code resolved my Question.

@font-face {
    font-family: 'Roboto-Regular';;
    src: url('/modules/mytheme/fonts/Roboto-Regular.woff') format('woff');
  }
@font-face {
    font-family: 'Roboto-Light';;
    src: url('/modules/mytheme/fonts/Roboto-Light.woff') format('woff');
}