[Sugarcube 2][Tweego] Help using a custom font

Question

Hello everybody,

I'm building my project using Sugarcube2 and compiling it with Tweego and I'm having problems loading a custom font from a folder in it. Currently, my project has this structure:

-SHR
--SHR_media
---Minecraft.woff  <--The font I want to use
---(some other files)

--src
---StoryCss.tw  <--The file where I have the ::StoyCSS [stylesheet] passage
---(some other files)

--shr.html      <--The resulting html file when compiling the project

In the StoryCss.tw file, I'm declaring the font and using it like this:

@font-face {
	font-family: Minecraft;
  	src: url(/SHR_media/Minecraft.woff);
}

#invitation-email p {
	color: black;
	font-family: Minecraft;
	text-align: center;
}

Finally, on the game passage, the css is loaded correctly for the <p> elements in a <div> with the #invitation-email id (it appears black and centered) but the font doesn't load. It changes from the default Sugarcube font to another one that is not Minecraft.woff (I supose it's another default font for when no font is found).

I've tried declaring the url sentence in the font declaration in different ways...

src: url(SHR_media/Minecraft.ttf);
src: url(/SHR_media/Minecraft.ttf);
src: url(./SHR_media/Minecraft.ttf);
src: url(../SHR_media/Minecraft.ttf);

...since I've seen that path should be relative to the .css file on a common website, but I'm not sure from what it should be relative in a Sugarcube2+Tweego project (from the file where the css passage is located or from the .html file you open the game?) so I've tried all options, but no one works.

Anybody knows how to fix it? Thanks!

Answer 1

Based on your example folder & file structure the Relative URL needed to access the Minecraft.woff font file from the generated shr.html file is.

@font-face {
	font-family: Minecraft;
  	src: url("SHR_media/Minecraft.woff");
}

warning:
Most Operating Systems (excluding Windows) are case sensitive when it comes to folder & file names, which is why it is generally recommended to only use a single letter case when naming them in web-based development, and generally all lower-case letters are used.

Because of this I suggest you rename to your SHR_media folder to media and your Minecraft.woff font file to minecraft.woff which would result in the above CSS changing to.

@font-face {
	font-family: Minecraft;
  	src: url("media/minecraft.woff");
}

 

Comments

Once again, the problem was a tiny detail... I wrote the path witt no " ", so src: url("SHR_media/Minecraft.woff") solved the problem. Thanks a lot!

(However, I used w3schools' example and there's no " " in there...)

---

You had a forward-slash character at the start of your Relative URL, this causes the web-browser to think that the SHR_media folder is located relative to the domain's root and not relative to the HTML file itself.