Better Google Fonts

July 18, 2011 – 9:46 pm

Google Web Fonts is an awe­some source of free, open source fonts hooked up to a world-class CDN. It’s also, sadly, filled with one-off nov­elty fonts vying for the title of “the new Comic Sans.”

I quickly dis­cov­ered that a good met­ric for higher-quality fonts was the pres­ence of at least one alter­nate. The Google Web Fonts direc­tory does not allow that type of fil­ter­ing, so I built this sim­ple one-off page that allows you to browse multi-variant type­faces. The lay­out is respon­sive, and click­ing the font name takes you to Google’s spec­i­men for that font.

All listed fonts are all down­loaded. It should go with­out say­ing that the page will load slowly.

Missed the link above? Go view Bet­ter Google Fonts. And, if you like code, it’s on GitHub for your fork­ing pleasure.

Tagged , , | By Matt | Posted in Design | Comments (4)

Environment Canada Mobile

June 13, 2011 – 9:56 am

The state of mobile weather apps isn’t awe­some. I find that it’s even worse in Canada, where weather data is sourced through non-Canadian providers such as Yahoo (iOS’s built-in weather app) or AccuWeather, nei­ther of which I find tend to pro­vide very good Cana­dian fore­cast data.

Envi­ron­ment Canada is my go-to fore­cast provider, but their site has been beaten with the Cana­dian government’s stan­dard web­site ugly stick. And, while a mobile site exists, it’s not much bet­ter. In fact, it’s worse in some ways.

All of this has led me to make a mobile web app ver­sion. Or, at least, a mobile web app ver­sion for Win­nipeg, where I live. I scrape the HTML via a proxy and restyle it in a iOS-esque style. (I might get around to inte­grat­ing a city-switcher, but that’s a lot of work and I built this for me and for fun.)

I opti­mized the design for two uses: 1) what are the cur­rent con­di­tions? and 2) what’s the imme­di­ate fore­cast? Most other fore­cast data is hid­den by default, but can be shown. There are a few media queries for portrait/landscape view, and I snagged icons from the open-source Oxy­gen project to replace the drab ones from Envi­ron­ment Canada. It also makes use of HTML5 Appli­ca­tion Cache to speed up launch time. And, although it should work any­where, it’s been heav­ily opti­mized for iOS Safari.

View my Win­nipeg mobile weather app. The source is on GitHub, of course.

Tagged , , , , | By Matt | Posted in Design | Comments (7)

FontFriend 3.2 Released: Now With More Google

June 6, 2011 – 10:28 pm

When I released Font­Friend 3.1, I men­tioned that Google Web Fonts didn’t have a proper API, mak­ing things dif­fi­cult. They still don’t have a pub­lic API, but on Thurs­day I was given “trusted tester” access to the new API. It won’t look that much dif­fer­ent, but there’ll be a few fonts work­ing now that weren’t before (multi-variants like PT Sans and IM Fell).

I’ve started using Font­Friend exten­sively on my Soma Web Font Spec­i­men (or, if you like, on the orig­i­nal) as a great way to eval­u­ate Google Web Fonts, as the direc­tory looks like an app, not a web page (although v2 of the direc­tory looks awe­some). If you have Font­Friend installed already, you’re already up to date. If you don’t, go install it now!

Tagged , , , , | By Matt | Posted in News | Comments (0)

Some Cranky WordPress Plugins

June 6, 2011 – 10:26 am

It looks like I may carve out a niche for cranky Word­Press plu­g­ins. This could either be seen as a per­son­al­ity flaw or as a per­fect fit within open-source cul­ture. In either case, Word­Press makes it easy for irri­ta­ble peo­ple to release plu­g­ins to change what they don’t like about it. I’ve done so twice recently.

Kill Admin­bar Search

WP 3.1 intro­duced the admin bar, which is gen­er­ally quite use­ful. How­ever, because WordPress’s search is gen­er­ally not use­ful, hav­ing the search field take up so much real estate is some­what frus­trat­ing. So, I made a plu­gin to remove it. You can down­load Kill Admin­bar Search from the plu­g­ins repo.

Use Hel­vetica Dangit

WP 3.2 (cur­rently in beta 2) has revamped the admin styles. It looks good, but we’ve made the griev­ous error of plac­ing Arial before Hel­vetica in the font stack, which I protested. What we should do instead is sim­ply declare font-family: sans-serif; and be done with it: this would ren­der Hel­vetica Neue on Macs, Arial on Win­dows, and what­ever Helvetica-like default sys­tem sans-serif is set on any given Linux dis­tro. But, since my plu­gin is optional, I’ve declared every Hel­vetica vari­ant under the sun, because nobody should have to look at Arial if they don’t have to. Down­load Use Hel­vetica Dan­git from the plu­g­ins repo.

 

Tagged , , , , | By Matt | Posted in WordPress | Comments (1)

FontFriend 3.1 Loves Google Webfonts

May 13, 2011 – 12:07 pm

I’ve had a num­ber of requests to bet­ter inte­grate Google Web­fonts into Font­Friend. They keep adding all these great fonts that any­one can use for free, and should be part of a tool like Font­Friend. The trou­ble was that they didn’t have an API, mak­ing it dif­fi­cult. More on that later, because I got it working:

Just pick a font from the drop­down list

Invoke the book­marklet as usual (it’s always up to date), and you’ll see a fancy new Google Web­fonts drop­down. Pick a font and it’ll appear in the cus­tom Font Fam­i­lies list. All vari­ants (all weights, both roman & italic) are auto­mat­i­cally pulled in.

How was I able to do this with­out an API? YQL to the res­cue, which it turns out is awe­some for tasks like this. But, after post­ing a teaser on Dribb­ble, Pablo Impal­lari hooked me up with the Google Web­fonts teams, who will have an API for this in place soon. I debated wait­ing to release until then, but I’d already done the work, so why not let every­one play already?

One other lit­tle nugget: Font­Friend will detect already-embedded Google Web­fonts on your page and throw them into the cus­tom fonts list auto­mat­i­cally. See a demo of Google Web­font detec­tion.

Finally, after tweet­ing about it,  I’ve had rep­re­sen­ta­tives from a few web­font ser­vices reach out to me about bet­ter inte­gra­tion once they get their APIs in place. There should be more ways to play in the future!

Tagged , , , , | By Matt | Posted in News | Comments (2)