CSS-Tricks
Thought Process of a Front End Problem
"Your fonts render weirdly on Opera mobile."
Thanks for taking the time to let me know. Can you send me a screenshot so I can see?
Wow that is weird. I use custom fonts, via @font-face and a third party service. This isn't just a matter of the custom font failing and falling back to a different font, which may look weird because of different spacing and such. It appears that:
- Some characters are rendered in the correct @font-face font
- Some characters are rendered in the fallback font
- Some characters fail to render at all (box-with-x thing)
First, I know there are two different kinds of Opera mobile browsers. "Opera Mini" and "Opera Mobile". I should bone up on that quick.
{Googles "opera mini and opera mobile".}
Find some weird forums posts, click around a little, end up at a decent blog post that explains the difference.
In Opera Mini, the Opera Presto browser engine is located on a server. In Opera Mobile, it is installed on your phone.
The person who emailed about the font problem said it was Opera Mobile, so I'll test that first. But as I imagine everyone in the world doesn't know there are even different types of Opera browsers on mobile devices, I'll test the other if I need to. It actually kinda seems like Mini might be the problem as I can imagine a server-side rendering engine might do some special shenanigans like "only wait X seconds" for third-party resources or something like that, leaving a font file half-downloaded.
I wonder if I can replicate this myself.
I have a Kindle Fire around here somewhere, but that thing has that weird Amazon Silk browser on it and I don't think it allows me to download any other browser. I have a Nexus 7 I bought for testing on Android, but I can never get it to turn on. I got it to once but I had to take the back cover off and basically stab it with a knife until it worked. I haven't gotten around to throwing it into a volcano yet.
Maybe I should buy a new Android device for testing that is more well reviewed. Or maybe a device that has Opera on it by default. Oh well, no time for that right this second.
Maybe BrowerStack can emulate it for me? Ooooh it can, nice.
Bingo.
Now at least I can replicate the problem. That way if I think of something to change I can test the results. Although unfortunately there are are zero DevTools built into this emulator so it can't help me figure out the problem by itself.
Maybe there is an emulator I can run myself? Ooooh there is! Good on ya, Opera.
While I wait for this to download I'll Google around a little. Hmmmm, a post by Mr. Zeldman that is extremely similar. His solution was to use a third-party service (e.g. Typekit), essentially because they are in the business of getting this right. Or use a trusted tool like the Font Squirrel generator to ensure the best quality files and syntax.
Unfortunately I'm already using a third-party service (Cloud Typography), so I don't have much control there. I'm going to keep working on this myself, but I'm going to fire off an email to them describing the issue. Most importantly so they know about it, but also because they might have a fix up I could try.
{Types up email and sends.}
OK that emulator finished downloading.
It works. Cool. The download site made it seem like you could use Opera Dragonfly to debug from this, but in reading the docs for it, it seems like you can only do that for local sites and it's a bit of a weird setup. Plus now I look and in the version of Opera I have it's basically the Chrome DevTools now, not Dragonfly. So I'd have to find some old version of Opera to download to do this? Uckgh I feel like this rabbit hole is getting too deep.
Maybe I should check out another site that is also using the same third-party service as CSS-Tricks. We're using Cloud Typography on CodePen also to serve font, but totally different fonts, so that should be an interesting test too.
Ah ha! Janky in the same kinda way.
That's the strongest lead yet. It must just be how Cloud Typography does things. Unfortunately I have fairly little control over it, because they provide the files to you and they are intentionally rather obfuscated.
I do have control on whether I serve the stylesheet at all or not though. I know I'm not ready to ditch custom fonts all together, because I like them and they generally work fine, but maybe I can ditch them somehow just for Opera Mobile.
It's always a little tempting to try User Agent Detection. Opera provides docs on what they do there and I could always test. But I'm hesitant. Not only is it theoretically bad, but every time I've ever done it I've regretted it because it either didn't catch what I wanted it too, caught too much, or both. Plus, I'm not finding any good-looking PHP code snippets for specifically this and I'm a better ballet dancer than RegEx writer. Do I want to head down that road again? Not really.
I could look into analytics a bit here also to see the scope of this problem. Here's the top 10 browsers here:
"Opera Mobile" doesn't show up anywhere in the list, even looking at all 189 represented. It must either be lumped in with "Opera" (some portion of 1%) or "Opera Mini" (some portion of 0.1%). Mobile in its entirety is around 3% on this site, which includes iOS and Android which are far more popular. So I think this is affecting probably around 0.25% of people.
I really want to fix this, but with the super small numbers involved, the lack of good testing tools, the out-of-my-hands bits, and the potential dangers of some fixes, I feel rather helpless. I guess I'll just wait and see what the provider has to say.
This is just a story of what it's like being a front-end developer. It's not even about fonts so much as the struggle, the process, and the choices.
Thought Process of a Front End Problem is a post from CSS-Tricks
Keine Kommentare:
Kommentar veröffentlichen