    
|
|
|
"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:
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
]]>|
|
|
|
One of my favorite things to do is looking round churches. I’m not a religious man, but whenever I visit a new city invariably the first thing I explore are the local churches or cathedral. To me, they represent timelessness and stability. They also represent a legacy. Somewhere there’s an architect whose life work was poured into that building. And here it is, standing hundreds of years after its designer has long gone, for all to see.
Legacy is something we programmers struggle with. It’s rarely discussed, and when it is it carries a negative connotation. Legacy code is a term that runs shivers down our spines. We rarely think of legacy in terms of making a mark.
I think we all have an urge to mark our stamp on this world, to graffiti ‘I was here–don’t forget me’. Yet, as a programmer, where is my legacy? Practically every program I’ve ever written has either been re-written by someone else, or discarded entirely. In another decade, there will hardly be a trace of my existence at all.
Perhaps a programmer’s only way to achieve any kind of meaningful legacy is by contributing to some lower abstraction that others build upon, like TCP or Linux. I’m beginning to think, though, that the best legacies are companies. They’re a living distillation of the original founders principles, and the best ones long outlive their creators.
The world’s oldest company was Kongō Gumi, a Japanese construction company specializing in building Buddhist temples which operated for over 1,400 years.
]]>
Every week we feature a set of comics created exclusively for WDD.
The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
Can you relate to these situations? Please share your funny stories and comments below…
| Clean Sans Serif Aneba Font Family with 10 Styles – only $7! |  |
|
|