Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Downworthy A browser plugin to turn hyperbolic viral headlines into what they really mean – http://downworthy.snipe.net/  via @smashingmag

The Mac is 30 http://depot.ly/sVrZn

Take a look at the creative work of El Famoso http://depot.ly/sVrmB

HTML5 Input Types Alternative http://depot.ly/sSyss

The biggest land rush in the history of the internet starts on February 4 http://depot.ly/sSuAx  via @qz

Beyond Tellerrand is back. Fantastic line-up, great content, lovely attendees and a wonderful atmosphere. http://btco.nf/btWDD2014  #btWEB2014

Interesting: 10 Things You Should Know About the Crop Tool http://depot.ly/sPKMc

The Minimalist’s Guide To Social Media Metrics http://depot.ly/sPKen  via @marketingland

Thou shalt not use default kerning and 9 other commandments of #typography from @CreativeBloq – http://depot.ly/sPJVw  via @designshack

Daniel Gies is killing it with sick After Effects rigs. Check out the video here: http://depot.ly/sPH7d

Did you know? In 1990, Nintendo rejected an offer that might had changed everything: http://depot.ly/sNXjA

Behind the dialect map interactive: How an intern created The New York Times’ most popular piece of content in 2013 http://depot.ly/sNXcG

For your inspiration: Think Invisible Posters http://depot.ly/sN9B9  via @fubiz

Fun from @FastCoDesign: 350 Kinds Of Zombies, Explained http://depot.ly/sNU48

Take a look at the beautiful work of design studio Wedge & Lever http://depot.ly/sLxrj

100 websites you should know and use http://depot.ly/sLwSG  *Nice list from @TEDNews

Mike Monteiro: How Designers Destroyed the World [Video] http://depot.ly/sLwmb

Colorful work from Roseta y Oihana studio http://depot.ly/sLrlK

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Clean Sans Serif Aneba Font Family with 10 Styles – only $7!

Register now for PHA Spring Recruitment at  https://umbc.mycampusdirector.com/register

PHA Spring Recruitment Schedule: 

PLEASE NOTE:

"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