This works in the forum preview AND Squiffy's output window. Why doesn't it work in actual Squiffy and in the actual Forum?

Code:

<style>
@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=ZCOOL+KuaiLe&display=swap');
</style>

<span style="font-family:Liu Jian Mao Cao;">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!?</span>

Result:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!?

Thanks, guys!

It doesn't work in the forum because I believe <style> isn't allowed; the preview doesn't test this.

Don't know about Squiffy; what does the compiled code look like?

Tried poking around with Squiffy, and it seems that when compiled, it removes <style> elements entirely.
I have no idea why it would do this. I've tried doing silly things like setting an attribute to <style> and using that… but it seems that is also removed when the game is compiled.

The only workaround I can think of is using javascript to add your CSS information. But that's really ugly.

I got something like this to work:

    this.text += "<sty" + "le>@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=ZCOOL+KuaiLe&display=swap');</st" + "yle>"

<span style="font-family:Liu Jian Mao Cao;">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!?</span>

(putting a break in the middle of "style" so that the compiler doesn't strip it out)

I've also tried reducing the javascript to a simple:

    this.text = replace (/stile/g, "style");

Then you can use <stile> in your passage, and it will be changed to <style> before Squiffy attempts to display it. But in this case, Squiffy recognises your URI as such, and magically tries to make it into a link, so you end up with:

<style>
@import url('<a href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=ZCOOL+KuaiLe&display=swap">https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=ZCOOL+KuaiLe&display=swap</a>');
</style>

which understandably fails to work.

At present, I think that using JS to add your style information is probably the best method.

Thanks, mrangel. That is incredibly clever! I don't even care if it's ugly! I am wowed!

Boy, I feel dumb. The easiest thing to do is just put all the @import url statements at the top of the style.css document. Then I can use any of the imported fonts at will.

In case anybody wants them, I've now found two more free web font websites that work with @import very easily:

onlinewebfonts.com

cdnfonts.com