0

I have been trying to build a website using a static site generator. I want to import a font that I downloaded from the web into one of my .scss files. I have been trying to do this for hours now without any success and I am not able to understand where I am going wrong. Any help would be greatly appreciated.

So, my file structure looks like this:

  • Assets
    • scss
      • style.scss
    • fonts
      • geometry-soft-pro
        • Geometry_Soft_Pro-Bold_N-webfont.woff
        • Geometry_Soft_Pro-Bold_N-webfont.woff2
        • stylesheet.css

Now, the contents of the Assets/fonts/stylesheet.css are:

@font-face {
    font-family: "Geometry_Soft_Pro-Bold_N";
    src: url("Geometry_Soft_Pro-Bold_N-webfont.woff2") format("woff2"),
         url("Geometry_Soft_Pro-Bold_N-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

This file was auto generated by fontsquirrel when downloaded a web-font kit from there.

Now, in style.scss, I am importing the stylesheet.css using the following code snippet:

@import "../fonts/geometry-soft-pro/stylesheet";

I removed the .css in the path above following this recommendation since I am importing a .css file into a .scss. (Also, I have tried keeping .css and it doesn't work either)

I am trying to use the font for a title using the following code snippet:

#home-title {
  font-family: "Geometry_Soft_Pro-Bold_N", $fonts;
  margin: 0;
  font-size: 5em;
  text-align: center;

}

And the result that I am getting is not the geometry_soft_pro font that I was expecting.

To test against the scenario that my font is being overridden somewhere else in my stylesheets, I have verified using inspect element on my browser. The font-family is not overridden anywhere. This seems like such a trivial issue and I have spent hours trying to fix it. I have run out of ideas on how to go ahead. Any kind of help would really greatly appreciated. Thank you very much!

Aditya Garg
  • 11
  • 2

1 Answers1

0

I found the answer to my own question. In retrospect, I realised that I had this problem since I had not read Hugo's documentation (and my theme's documentation) properly in the first place.

The public directory (the directory finally responsible building the static site) that Hugo builds does not retain the root's file structure. The files are rearranged and their location changes. The location depends on how Hugo's static site generator generates the public directory from the project's source code. So, it's important to follow Hugo's recommendations as to where certain files are to be kept such that they can be referenced in the public (generated directory) directory. Hugo suggests that files like those of font and images should be kept in a folder named "static" in project's root. I was making the mistake of putting my font files in folder called "assets".

Aditya Garg
  • 11
  • 2