tweego, version 2.1.1+81d1d71 (2020-02-25T07:09:26Z) [darwin/amd64] “name”:“SugarCube”,“version”:“2.36.1”
Hi!
I’m using a folder with four CSS files, to organise, and I’ve attempted to use an @import url(font) by placing it in my main CSS file but, looking at the generated HTML and through dev tools, the font doesn’t apply, despite the statement being clearly visible in both the head and body (not sure why SugarCube inserts my CSS in both locations…).
I’ve also tried with StoryStylesheet [stylesheet] and verified the import statement appears in the HTML, but, again, no font is applied.
The only place I’ve found it working is in one of my other CSS files, although according to my organisation criteria, it isn’t supposed to be present there.
I’ve also ensured there’s no overriding font css code anywhere, using dev tools.
I’m using the following CSS to use the font, in my main CSS file (where I was trying to initially place the font import):
body {
font-family: 'font-name-here', sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Changa&display=swap');
body {
font-family: 'Changa', sans-serif;
}
And it works just fine…
Is there truly no other rules in the CSS files that could override the font-family in body/#passages/.passage (or any div that could contain the main text)? or some JavaScript changing the font?
Also, since it’s an online font, is the file tested with a browser connected to the internet? Or an extention in the browser overruling the font?
I just reproed the issue again now by moving the @import from the one where it works, to my main CSS file. I changed no CSS rules, and yet the font has reverted to the default. The computed CSS for font-family remained the same, as font-family Changa, sans-serif (note, this is the computed value in dev tools, so no colon here).
When searching for the @import statement in full, I see two entries: html head style#style-story (text), and html body.tbar tw-storydata style#twine-user-stylesheet (text)
If you’re up for it, I can PM you a zoom link and I can show you directly. I’m hesitant to post more of my source code here.
@Atawf
You stated you have four CSS files, one of them being your “main” one in which you added the @import rule.
When the TweeGo compiler processes the content of those four CSS file it will combine them together to create a <style role="stylesheet" id="twine-user-stylesheet" type="text/twine-css"> element in the Story HTML file’s <tw-storydata> element. Which the SugarCube engine will process during startup to create a <style id="style-story" type="text/css"> element in the document’s <head> element.
And the order that the TweeGo compiler processes those four CSS files, thus affecting the order their contents appears in the #twine-user-stylesheet and #style-story is determine by:
the order that your Operating System supplied those CSS files to the TweeGo compiler.
[potentially] the names you gave those CSS files
eg. if you named those CSS files: main.css; first.css; second.css; and third.css. And you were running Windows then by default those CSS files would be supplied to the TweeGo compiler in alphabetical order of their names (first, main, second & third).
And that can affect the order that rules get applied, and potential the execution of @ rules…
To verify Greyelf’s suggestion, open the final HTML file and see the actual order of the CSS that’s compiled. Damn, you are a clever elf.
Hit F12 in your browser and go to the Elements (or Inspector) tab. You may see multiple <style> tags in the <header>, but as long as the @import is at the top of the one using the font-family in your story, you should be good. At least, this is how it works with other Twine story formats.
I could’ve sworn that I had already done this, but I did it again for the sake of it. My style.css was renamed to 1-main.css, and I placed the import at the very top of the file. At the bottom was the body { font-family } statement. And lo and behold, it works. Very strange but thanks to the both of you for helping to resolve this!
I presume there’s no way to affect order of CSS file loading using SugarCube/Twine other than renaming the files? It’ll be annoying to have numbers or otherwise restricted to alphabetical ordering in filenames as-is…
To be clear. The likely issue was that the rules were being combined in such a way that the @import rule was not at the top of the generated <style> tag.
Many @-rules must either be at the top of their <style> tag or a group @-rule, otherwise they’ll be ignored. As you’re probably guessed @import is such an @-rule.
I’d suggest putting all font imports—via importing an external stylesheet (@import) or directly importing an external font file (@font-face)—in their own separate CSS file that’s sorted above your other CSS files—e.g., I think _fonts.css should work. Alternatively, you can specify the order on the command line.
Because the order that the files are supplied to the TweeGo compiler is controlled by the Operating System (OS) itself, renaming those files may not be enough to alter the order they are processes if the OS decides to supply them in file-creation order.
Actually you can totally control the order files are processed.
You didn’t supply an example of the command you’re using to call TweeGo, but it likely looks something like…
tweego src -o adventure.html
…where src is the name of the ‘root’ folder of the folder-structure that contains all the files (*.tw, *.css, *.js) you want included in the generated adventure.html Story HTML file.
You can control the order the compiler processes files by including them in command line.
eg. the following will process main.tw and main.css before the contents of the-rest folder-structure.
eg. the following will process the files in the main folder before those in the-rest folder
tweego main the-rest -o adventure.html
So if you restructure your project folder-structure slightly, and then alter the command you use to make use of that restructure, then you can have better control over the file processing order.
Many @-rules must either be at the top of their <style> tag or a group @-rule, otherwise they’ll be ignored. As you’re probably guessed @import is such an @-rule.
Good point! Perhaps that was the issue. Thank you for clarifying!
You didn’t supply an example of the command you’re using to call TweeGo, but it likely looks something like…
Indeed it is! Although I have separate folders already, one for css, js, etc. But another very helpful point; I’ll arrange the files and folders as you suggest. Thank you!
