GillSansLight font not rendering for header elements

[don-stuckey]

Please complete the following fields as applicable:

What version of the DMPRoadmap code are you running? (e.g. v2.2.0) v4.1.0

Expected behaviour: The GillSansLight font should be rendered for header elements as specified in:

1. app/assets/stylesheets/blocks/_html.scss
2. app/assets/stylesheets/variables/_typography.scss

Actual behaviour: Instead, the default font of the browser (Helvetica) is rendered for header elements.

Steps to reproduce:

1. Load roadmap in the browser.
2. Right-click on a header element, e.g. "Welcome to DMPRoadmap.", and select "Inspect" to open the developer tools.
3. Then, click on the select-element button at top-left of developer tools, and hover over the element and you will see that the font is not GillSansLight.

[don-stuckey]

In the _typography.scss file, simply removing the asset-path() wrapper function then resulted in the asset path of the GillSans-Light.ttf file getting resolved on running rails assets:precompile, i.e.:

@font-face {
  font-family: 'GillSansLight';
  - src: url(asset-path('GillSans-Light.ttf')) format("truetype");
  + src: url('GillSans-Light.ttf') format("truetype");
  font-weight: normal;
}

However, in my local instance, on running bin/dev, two .css files are getting pulled up by the browser:

1. application.debug-<hash>.css
2. application.source.css

The first file has the GillSans-Light.ttf asset path resolved, i.e. it has:

@font-face {
  font-family: "GillSansLight";
  src: url(/assets/GillSans-Light-1d3a4235b4d6b1accc84c8dd6c4d1024edf53d8cc79cc1d80c36dcf43f362b8f.ttf) format("truetype");
  font-weight: normal;
}

...whereas the second file does not have the GillSans-Light.ttf asset path resolved, i.e. it has:

@font-face {
  font-family: "GillSansLight";
  src: url("GillSans-Light.ttf") format("truetype");
  font-weight: normal;
}

...but it is the second file (which does not have the resolved asset path for the GillSans-Light.ttf file) that is being used by the browser to style the content, and therefore the GillSansLight font is not getting applied to the header elements.

Hence, I need to figure out (i) why two .css files are being brought up to the browser, and (ii) why the intended .css file with the resolved asset path is not getting used by the browser.