Adjustment to Mobile Issues

[ema_k]

Wow, It's been a while. Long story short, I've been fiddling with a skin I found (adding tumblr stuff and using code from other sources. Very few amounts of this CSS are actually mine, and I'm not taking credit.)

Here's the skin:
docs.google.com/document/d/1EUgKGeIZtHl7WqgkgklFrlD4Kla1cU7k6kMApahRbgI/edit

I've been having so much trouble trying to translate this to mobile. I'm pretty sure there's no way to specify when it's mobile in the CSS of the skin, and I no matter how hard I try, I can't understand the whole parent situation. I've been looking for ages and tutorials always use examples using public skins and I just don't know how to apply it to my custom skin. The minor attempt I made using the advanced settings on a new skin didn't work (the custom font I installed on my computer wouldn't appear because, obviously, it's custom, so I ctrl + c ctrl + v:

h1,

h2,

h3,

h4,

h5,

h6,

.heading {

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

  border-bottom: none;

  font-weight: normal;

}

 

and changed Halloween Kliwones to Gothic Bold (installed on my phone), nothing. If anyone could give a direct play-by-play on how to change the mobile look with this frankenstein meshed skin, that would be deeply appreciated.

Comments

[a_flyleaf]

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.

[ema_k]

Oof, I'm sorry for confusing things with the wording, the actual issue I'm facing is that no matter what I try, I can't make anything change with this skin on mobile. That's what I mean when I talked about the whole parent thing, I don't understand how it works and I want to be able to use this skin on mobile, and nothing is working. The font thing was just an example of my attempt to make it work. I still can't make this thing work on mobile, and I have to switch it to Reversi on my laptop beforehand, because if I leave it, I can't even access my dashboard to reach my skins on mobile.

And I have a Samsung Galaxy 💀💀💀.

Lololol I can see how I phrased it was confusing.

[a_flyleaf]

Ohhhhhhh okay ok that makes sense. So when you use it on mobile, does it look like regular Ao3 or does something else funky happen? (Being unable to access your dashboard has me wondering if the skin blanks out the page entirely or something.) Might not be able to help regardless, just trying to ask some clarifying questions ^^; & Does vegetablearian’s suggestion work?

[vegetablearian]

The parent thing is pretty easy, you make a desktop skin that's the parent of the mobile skin. You do that through the mobile skin in the options at the bottom. In the mobile skin, it's code that only applies to mobile. You use the mobile skin all the time, it just doesn't apply on desktop so it doesn't matter

In the mobile skin, you make it "Media: only screen and (max-width: 42em)" That's all there is to it! And you don't need to put !important on the overwritten stuff in that file or anything like that, it does it all for you :) Just use the plain css you want to use on mobile that's different to the desktop version.

You can label your skins like MAIN SKIN - PARENT - DON'T USE and MOBILE - USE THIS ONE or whatever if that helps. I have a bunch of skins in a weird tree-chain and when I change skin for any reason I forget it's the mobile one I need to go back to!