scratch this, misdiagnosed the problem; leaving this up in case it helps anyone else

Okay, shot in the dark because I’m 1) writing from mobile (will edit this when I’m back on desktop) and 2) don’t have an Ao3 account to check for certain, but there are two things that stick out to me:

- Multiple-word font names should always [edit: normally, as best practice (but it won’t necessarily break if you don’t)], be enclosed in quotation marks, regardless of whether they’re installed; so, "Halloween Kliwones"; and
- I noticed the other header rules use, for instance, h4.heading; are those working as intended? If so, you might need to specify classes for the font overrides here, like h1.heading, h2.heading, h3.heading etc.

The second point I’m less sure on and might not be needed [edit: Confirmed, the header part works as expected]; edit to check forthcoming!

---

Okay, just to be 100% clear: I am assuming that, when you refer to the skin not “translating” to mobile the problem is that
- the skin works almost entirely as expected, on both desktop and mobile, but
- on mobile, the header fonts don’t change?

If you had a different issue then the rest of this probably won’t be helpful ^^; Let me know what specifically isn’t working as expected, and I’ll see what I can do!

But if my assumption is right—the problem is that, even though most of the skin looks good across devices, the header font doesn’t work on mobile despite being installed—then: Good news and bad news! Good news is that, from what I tested, this doesn’t seem to be a problem on your end. Bad news is that, even though there’s a somewhat hacky CSS workaround for using custom fonts in general, the rule that’d make it work (@font-face) is not allowed on Ao3.

So unless someone else knows more about mobile fonts and how to finagle them in CSS, the best I can suggest is a fallback. The way the font-family line works is that, if the device/browser can’t load the first one specified for whatever reason, it’ll go down the list until one does work. Subsequently, to keep Halloween Kliwones working on desktop while using something a bit fancier on mobile, that line will look something like this (mobile fallback in bold):

font-family: Halloween Kliwones, AppleSDGothicNeo-Bold, "Bookman Old Style", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;

If you’re using an iOS device, you can get the specific font code from the iOS Fonts website (the fonts won’t display if not installed; this is expected behavior):

[image description: Screenshot of the iOS Fonts website as it appears on my desktop. “gothic” has been searched for, which returns variants on “Apple SD Gothic Neo.” Because my desktop isn’t an iOS device, the text is shown in the default font Times New Roman. Underlined in red is the font variant used in the code above, AppleSDGothicNeo-Bold.]

I only tested the one shown above on an iPad, but other font names should work the same way. Let me know if you’re using a different kind of mobile; probably won’t affect the core issue, but I’ll see if I can track down a similar list of system defaults ^^;

TL;DR Far as I can tell, installed fonts won’t work on mobile. You can use Gothic Neo, or a different alternative, by 1) finding its name for CSS (easiest way with an iOS device is to use the website above), then 2) adding it to the font list after Halloween Kliwones, as shown above.

---

In case someone else knows more about mobile fonts and CSS, here’s exactly what I did to try making this work. Includes the aforementioned hacky-workaround—but again, that won’t work here due to Ao3’s limitations. Maybe this’ll save you time anyway? :,D

notes on testing that may or may not make sense to laymen

setup/techy details
- Since I don’t have an Ao3 account I used SquidgeWorld; going by this post by ao3skin on tumblr, the skin functionality is effectively the same/similar.
- Got Halloween Kliwones via dafont, which is an .otf file.
- desktop: Windows 10, installed the font and subsequently saw it in the skin as expected.
- “mobile”: Downloaded iFont, since it seems to be the only (or at least top-rated) app that lets you install iOS fonts from a file for free. Installed the font with it, but didn’t see it on the skin.

things that did not work → conclusions drawn
- using an alternate skin with only the font-family rule → problem is with the font (code) itself, not the rest of the skin
- variants on the name Halloween Kliwones, with and without quotes, spaces, hyphens, and/or Regular at the end → either the needed font code is weird/unintuitive, like "AppleSDNameOfFont", and/or there’s something awry with the file itself
- attempting to use Halloween Kliwones on a standalone page (via both glitch.com and Neocities) → same result as the skin (worked on desktop, not mobile), therefore it’s a mobile font problem

I did not try downloading the font from a different file or source, mostly because I was borrowing the testing iPad and didn’t want to keep it for too long :P FontSquirrel’s webfont generator might be pertinent? (Alternate filetypes under the Expert toggle.)

hacky workaround:
1. upload font file somewhere (Neocities works; Glitch.com also seems viable but spits out a weird code, probably less reliable in the long term)
2. import via font_face, src URL to file
3? discover this will even loads a font that the user doesn’t have installed!
4? also find that SqW(/Ao3, by presumed extension) wipes the @font-face rule
5: alas:

We cannot allow the @font-face attribute. Sorry! If you have an uncommon font that you want to use in a skin you would like to share, we suggest adding a comment in the skin's "Description" field with a pointer to a place for users to download the font themselves, and using web-safe fonts as fallbacks.

At this point I called it a day and started editing this comment.