Going Google-less – A Week Without Google

A week ago on my blog, I posted my pledge to go one week without Google.  It was inspired, in part, by the Google/Verizon proposal for the future of high speed and wireless internet that was devised in closed-door meetings, in secret, while the same discussions were being had with the FCC and other major players that Google and Verizon were also a part of.  This sort of self-serving duplicity, as well as serious concerns about the end result for consumers this proposal would have if enacted, put a serious damper on my ongoing Google-love.  How dependent on Google, specifically, was I really, and could I actually live without using a single Google service?  As more and more concern about Google and their agreement with Verizon poured in, I wanted to find out.

I actually started early in my week without Google.  Friday night, after deciding to do this experiment, I set out right away to converting the stuff I use on a day-to-day basis to be without Google.  The first step was Gmail/Google Apps.

I use Google Apps for my primary email address.  While I have a Gmail account, I haven’t used it since getting my own domain name for my blog at jazzsequence.com, and I just forward everything sent to my Gmail address to my jazzsequence address.  (While, technically this could be considered still using Google, I’m not considering forwarded email from an unused email address to be really “using” Google services).  The process of switching my email away from Google Apps was pretty easy, so I had to go one step further to make it more complicated.

I’ve also played with the idea of migrating away from Microsoft Office products in favor of open source projects that support collaboration and open standards.  Switching to OpenOffice is easy (although I am skeptical now that Sun (and, in turn, OpenOffice) was acquired by Oracle).  In fact, last time I had to reformat my computer, I tried to install Thunderbird and use that for email but for some reason I couldn’t get it to play nice with my Google Apps email.  I didn’t have the patience for it and Outlook picked up the right settings right away, so I just gave up reluctantly and have been using Office ever since.  This time I stuck it out, since the Gmail/Google Apps problem wouldn’t be an issue and managed to get Thunderbird to play nice.

The other reason I’ve avoided moving away from Outlook is because I’m hopelessly dependent on the Calendar and Tasks features.  We use these internally at Arcane Palette to send each other projects or tasks for projects to work on and manage our workflow that way.  We’ve tried other project management applications, but using the one built right into Outlook it so much easier than having to log into a third-party application, especially when said application doesn’t necessarily send said emails.  Thankfully, Thunderbird has Lightning, the new Calendar and Task extension by Mozilla.  That’s two down, and that takes care of my email.

Next was switching from Chrome to Firefox.  I’ve been using Chrome since the late beta period, and have grown so accustomed to it that it’s second nature.  The web developer tools have become an invaluable resource when I’m working on a website, and I’ve foregone heaps of integrated functionality in favor of bookmarklets, plastering them all over my bookmark bar.  However, migrating to Firefox was relatively painless as well.  I just needed to export my bookmarks as an .html file and was able to import said .html file directly into Firefox and then move all my bookmarklets to Firefox’s bookmark bar.  I then focused on making Firefox more lightweight by uninstalling some plugins I wasn’t using and installing a couple plugins that would add some of the Chrome functionality I had grown used to, in particular, Taberwocky, which I use primarily to be able to duplicate tabs.  Since I’ve been using Glue, I finally got to install the Glue plugin and experience the web the way Glue wants you to, and I installed Firefox’s personas just for fun (which is Firefox’s version of Chrome’s visual styles).  I use Hootsuite for Twitter, and with Chrome, I was doing this by creating an application window for it, so it runs as its own standalone app.  Mozilla has this, too, in a project called Prism, and I actually like Prism more because it allows you to customize the icon, which Chrome’s application shortcuts don’t do.

I also switched search engines.  This was harder than it sounded.  You don’t realize how used to typing google.com into an address bar you are until you try to do something else.  I also realized I’ve become dependent on Chrome’s auto-fill technique of allowing you to search a site by typing the domain and hitting TAB.  I’ve yet to find something like that in Firefox.  On the other hand, Firefox has Search Engine add-ons for a variety of sites (including Wikipedia, which, along with YouTube and Amazon – both of which have Search Engine Add-Ons – was what I was using most frequently), which made it easy (easier, anyway) to switch over to Bing as my primary search engine.

The setup took me through the weekend, so by Monday I was ready to start my work week without Google.

YouTube was difficult to avoid.  It’s so ubiquitous for video sharing that you can choose to not watch viral videos, or you can suck it up and watch things on YouTube.  YouTube was acquired in 2006 by Google for $1.65billion from a couple of ecstatic developers who built it, and since then, Google has both added advertising to videos and started doing video ads with their AdSense service.  This was one thing I cheated on my Google-less week for, although that’s more a result of the decision of content creators to use YouTube rather than another service like Vimeo.

On Tuesday, I needed to send an invoice to a client.  I paused and thought hard.  PayPal has a higher processing fee, plus I have a bias against them since they screwed me once.  That said, in a lesser-of-two-evils decision, PayPal, at least, isn’t trying to take over the world (or, if not the world, gain more control over the future of the Internet than the government organizations assigned to regulate it and keep it free from corporate interests).  So I put my boycott on PayPal aside and sent out an invoice with a PayPal-linked button rather than a Google Checkout-linked button.  This was probably the hardest switch to make not because PayPal is inherently more difficult but because both companies, in my opinion, are crooked.

I suppose it should be said that I’m addicted to the web developer tools built into WebKit (and therefore Google Chrome), in particular the Inspect Element context menu.  I use it every day and I knew going into this experiment that this would be something I was missing.  I’ve become so accustomed to using Inspect Element that I’d completely forgotten how to use the much more elaborate Web Developer Tools plugin for Firefox (though I still had that installed).  In the end, for web development, I used Safari so I could get the benefit of the Inspect Element option.  To be honest, there was no specific reason for choosing Firefox over Safari as the browser of choice and by Wednesday I started considering just switching.  Most likely it was simply ubiquity and the fact that Firefox was what I was using before switching to Chrome, though, in retrospect, Safari is just as solid.

On Thursday, I realized that the database backups I schedule to automatically send every week to a specific email address weren’t coming.  After a second, I realized why; I never set up the email address when I was moving my mail over to my webhost.  While it’s just as easy to set up mail through your host as it is to set up Google Apps to handle your mail, it’s worth remembering that if you do decide to switch back (or switch any host or email provider), any email addresses you have set up will need to be recreated on the new host.  It’s a simple enough task, but just as easy to forget, especially if you have forward-only addresses like I do.

Another thing you forget about Gmail is how good the junk mail filter really is.  It’s been years since I really thought very much about junk mail.  I get so little of it, that I don’t even notice the problem.  Only after moving my email away from Gmail did I start to notice the junk come in, many times it was the same piece of junk mail.  Outlook has some built-in controls for that (which, of course, I’d forgone in favor of Thunderbird), and Thunderbird does as well, although, for the most part, it relies on you to mark things as spam to learn what to filter and what not to.  Thankfully, many webhosts have server-side spam filtering (using SpamAssassin or something similar), which I was happy to find on my host when I realized that was what was going on and looked for the possibility of a server-side spam filter (note: it wasn’t turned on by default, as they often are not, so if you find yourself inundated by spam, it’s a good idea to see if your webhost has the option and turn it on, if necessary).

The point of this experiment was not to take my one-man boycott and stick it to The Man.  I knew I relied heavily on Google services, and wanted to see how deep the ties were and how difficult it would be to avoid them.  Most people use Google by default, without thinking.  Are we wrong to do this?  Google has not made a secret of taking our information and using it to supercharge their other apps, like AdSense and search.  Facebook does this too.  But the difference between Facebook and Google is that Google is also asking you to host all your documents with them, to use their phones (bundled with their services) with your mobile service, to take control of your calls with their VOIP service, to own your conversations with their messaging service.  Does this mean that behind every corner, with everything you do online, you have a Google bot reading your messages, your emails, your documents, and assimilating that information into their vast grid for future use?  Are we okay with that?

Even putting Google and Verizon’s recent bid to determine the future of broadband and wireless internet aside for a minute, it can’t go without noting that Google is a huge corporation.  They may have started out as two guys in a garage, but those days are long gone.  Have we forgotten that Apple and Microsoft had similar beginnings?  Google isn’t the underdog anymore, they are the behemoth, and they want your data.  Internet pioneer, Richard Stallman, has some choice words on the sorts of cloud computing technology Google has led us toward with Gmail and Apps.

The real meaning of ‘cloud computing’ is to suggest a devil-may-care approach towards your computing. It says, ‘Don’t ask questions, just trust every business without hesitation. Don’t worry about who controls your computing or who holds your data. Don’t check for a hook hidden inside our service before you swallow it.’ In other words, ‘Think like a sucker.’

We can choose to not be a sucker.  We can look for a hook.  There was a time when people distrusted large businesses simply because they were large.  In this economy, where many of the little and smaller companies have crumbled, we should be even more wary of those left standing, not less.  When a company starts making rules for the government, that’s when I start tuning out.

The answer to the main question of the experiment, can you survive without Google, is: yes, of course you can.  Gmail is great, but by no means is it the be-all end-all email solution, and by no means is Gmail’s junk filtering the only answer, either.  Other cloud computing apps should make you wary at the very least – if the world ended tomorrow and those servers went down, would you be okay with loosing that data?  Neil Gaiman mentioned that some documents from 2007 stored in Google Docs were missing and that he may have lost a story.  I find this, for a writer – a bestselling one, at that – to be absolutely unacceptable, and proof that your data is not guaranteed.  And the only way to truly secure your data is to don your tinfoil hat and start keeping hard copies.

We’re so reliant on the web we don’t even think about it.  I don’t retain a printed copy of my tax return unless I absolutely need it.  Why should I?  Printer companies gouge consumers on ink refills for cheap printers enough that I no longer own a printer.  I have a pdf copy and I file electronically.  Personally, I retain all important data on a home server that maintains weekly backups on an external NAS server, but most people don’t.  The point is, we’ve become so used to going paperless that the idea of going back makes us sound like some relic from the 1950s (no offense to relics from the 50s).  Likewise, distrusting cloud computing, Google, Facebook, any company that hordes our data, makes us sound paranoid.

The answer to the followup question to the experiment, will I continue to live without Google services is: probably.  I was dissatisfied with using Firefox for all my browsing, and enjoyed using the Glue extension for Firefox that I was never able to use in Chrome, but as an experiment, I went to Glue in Safari and found an extension there as well.  Which implies there may be other extensions available for Safari that I didn’t know about (although, really, there weren’t many I use daily in Chrome, and one of them is a Google Voice extension).  Moving forward, I plan on switching over to Safari for my browsing as a replacement for Chrome rather than Firefox.

My email is already switched and I have no intention of switching back.  I’m now using free software (free as in freedom as well as free as in beer) to manage my email via Thunderbird, and I’m quite happy with it.  I was already growing apart from Google after my new mobile carrier (Sprint/Nextel, via CREDOMobile) doesn’t support Google Voice entirely, and text messages sent to my Google Voice number forward to my phone even when the setting is disabled to forward texts (as a way to save on individual text messaging charges).  Bing is not as good for search as Google, but it’s passable, and in many cases where I was looking for something specific, a site search gave me the result I wanted.

When I started this experiment, Nico, from Ten Times One, commented on my blog, saying, “Google is good for business.”  As a small business owner, sure, Google helps, but the only Google service I was using as a business was Checkout.  We experimented with AdWords only to find that it was a lot of money for no real result.  I haven’t used up the rest of my $100 credit, and we currently advertise via BuySellAds.  Google will always color how we think about search engine optimization, but Google is trying to enter an enterprise market with Apps where Microsoft has dominated for more than a decade and those types of markets aren’t often subject to radical change.  It will be a steep hill for them to climb to try to sell their wares to corporate businesses.  Even for business, Google is not the only answer, nor, in many cases, the best answer.  And increasingly, their dominance over the advertising market will decrease as Apple, Yahoo, and Facebook become more relevant players.

The first step in changing the world is to change yourself.  I’m not trying to change the world, but it’s also terrifying to me that we let ourselves be subjugated by corporate interests without being aware of it.  So, I encourage you to think about the online services you use, whether they’re Google, Facebook or other, and think about the data you’re giving them.  Could you live without that data?  Could you live without that service?  Could that data be used against you?  Do you trust a multi-billion dollar multi-national corporation with that data, whether it’s a search query or sensitive medical documents?  Does it make any sense at all for a multi-national, multi-billion dollar corporation to truly have your interests at heart?


Chris Reynolds is one half of the design team at Arcane Palette Creative Design. He writes in his personal blog, jazzsequence, on subjects like music, technology and social media and shares links, videos, and posts various personal music and writing projects. You can also follow him on Twitter.

Jumping on the webfont bandwagon

Webfonts are literally changing the face of web design (no pun intended). Even just between the time I wrote my last post on @font-face and now, there have been numerous additions to best practices and available services for invoking new, creative typefaces in your web pages.  It’s dizzying getting started because there’s just so much out there and new methods of calling fonts are cropping up all the time.  In this article, I talk about what the web font formats are, where to get them and how to use them.

What the options are

TrueType/OpenType – I’m not going to go into the difference between TrueType and OpenType in this post.  The two things exist and they are more or less the same and are typically the most common font types.  The important thing about these formats is copyright; what’s linked when you use either OpenType or TrueType fonts in your stylesheet or code is the original, unmodified font (or a variation of it) which gets downloaded as an element of the web page (just like any other element of the page like graphics or Flash).  Therefore, if you’re using TTF or OTF fonts in your code you need to be sure that the font you are using has an open license that allows for public usage.  If you don’t, you are potentially violating the font creator’s copyright and could get in a lot of trouble.

EOT – The Embedded OpenType format was developed by Microsoft in 1997 with the release of Internet Explorer 4.  What makes EOTs geared for the web is that they can only be viewed in a web browser (and, being a proprietary format developed by Microsoft, only one web browser is able to support them, that being IE).  It shouldn’t be a surprise, then, to know that Internet Explorer only supports EOTs for web fonts (thus far).

WOFFWeb Open Font Format was developed by Jonathan Kew from Mozilla, Tal Leming from Type Supply and Erik van Blokland at LettError and was first supported by Mozilla Firefox.  Like EOTs, WOFF fonts are only viewable in a browser and have the added benefit of additional compression (capable of decreasing the size of the font by up to 40%) and is able to contain additional metadata, such as the font creator.  WOFF is a favored format by the W3C as the standardized web font format and is planned for support in Internet Explorer 9 and a forthcoming version of Google Chrome.

Cufón – Cufón was designed to be an alternative to sIFR.  While not a font, per se, it shares a lot of similarities with standard web font embedding and may also violate existing copyrights on proprietary typefaces.  Cufón is a javascript-based method that converts the font into VML (for Internet Explorer) or SVG (for everything else) to render the characters as vector graphics.  Like standard web font embedding, an external file is required (in this case a generated font file read by the javascript) which is downloaded as an element on the page.  One substantial benefit of Cufón is that the rendered fonts are often much smoother than can be achieved by embedding the actual font itself.

Where to get the fonts

You may be looking at the list of different font types and wondering how you convert your fonts into one of those than can be embedded into a page.  Don’t worry, it looks much harder than it is…

For standard TTF and OTF fonts, there are numerous places to download free fonts.  However, not all fonts that are “free” to use are actually “free” to embed on your website.  DaFont does a good job of distinguishing free, free for personal use and commercial, as does FontSquirrel.  There are also open font movements like the League of Movable Type and the Open Font Library which have repositories of free fonts that are safe to use on your site.

EOTs used to require an antiquated Microsoft-developed tool for converting fonts to EOT format, but the renewed interest in the format has led to the development of a couple of alternate methods.  For people comfortable working from a commandline, there’s TTF2EOT.  This simple Windows/*nix-based tool adds a simple commandline interface to convert a selected font to EOT.  For the less geeky, there’s EOTFast, however, as of this writing, it is still under development.

Similarly, WOFFs have a commandline tool called sfnt2woff which converts TTF or OTF font files to WOFF.

For Cufón, you pretty much have to use the web-based generator on Cufón’s home page.  While it gives almost complete control over the end result, the plethora of options can be a little overwhelming.

Luckily, the best and easiest place to get the fonts or have them converted is from the @font-face Generator at FontSquirrel.  FontSquirrel’s @font-face Generator comes in an Easy and Expert mode, so you can choose whether to let the generator pick the best options for you or to have more full control over the options.  Better still, it is able to generate TTF, OTF, EOT, WOFF as well as Cufón files, in addition to the actual CSS and markup needed to call the font (excluding Cufón which — presumably because it’s so much different from standard @font-face embeds in terms of how to integrate it into your site — you’re on your own for the code).  After you accept the agreement that the fonts you are using should be free to use, you just upload your source TTF or OTF and get a zip file containing everything you need to embed your font.

How to use them

If you used FontSquirrel’s Generator,  you can pretty much use what it spits out verbatim.  Even so, it helps to know what you’re doing and why, and there’s a few tricks that might help along the way…

First off, the code.  This is Paul Irish’s Bulletproof: Smiley variation of the @font-face declaration, and is edging to be the standard.  You can read his post about why it’s the best option.  For my part, I defer to the experts who have spent much more time than I have researching all the variables.  If you downloaded your kit from FontSquirrel, you’ll already be using the smiley declaration.

  1. @font-face {
  2. font-family: 'Graublau Web';
  3. src: url('GraublauWeb.eot');
  4. src: local('☺'),
  5. url('GraublauWeb.otf') format('opentype');
  6. }

Simply replace the filename above with the path to the font and set the font-family name to what you’ll call it later.  It should be noted that Firefox has problems with paths that aren’t relative (e.g. full url paths) — this is a security precaution to prevent people from injecting malicious code into their site from off-site.  In most cases, this isn’t an issue, but it can pose a challenge if, for example, you were trying to use @font-face on a site with no local storage (like a BlogSpot blog) and were using some kind of off-site dump to host your files.

So that declares what that font is.  When you actually want to use it, you just add the family name to your font-family the way you would normally, so something like this:

  1. h1 {font-family: 'Graublau Web', 'Times New Roman', Times, serif;}

You’ll also, of course, need to have uploaded the font to the server and make sure your source url points to the right place, but other than that, it’s pretty simple.  So what of these special considerations and tricks I mentioned?  Well, as usual, the first problem involves Internet Explorer.

If you’ve played with @font-face declarations at all, you may have noticed that your font looks great in Firefox, spectacular in Chrome and Safari, and like absolute crap in IE.  Ironically, this is because of ClearType — you know, that service that was introduced in WindowsXP that was designed to introduce font smoothing.  In IE7 and higher, ClearType is running within the browser, which in most cases is fine except when it comes to custom fonts.  In that case, it’s evidently trying to do a task that’s not required of it, and ends up hacking away at the edges which is what gives you the horrible jaggy appearance.  (This is one case in which, actually, IE6 is less broken then its successors.  Too bad it will be nigh impossible to find a machine that uses IE6 anymore.)  The fix, then, is to turn off ClearType, which, conveniently, you can do using Microsoft’s browser filters.  In the above h1, you would change it to look like this:

  1. h1 {font-family: 'Graublau Web', 'Times New Roman', Times, serif;
  2. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/headers/hIEfix.png,sizingMethod=crop);zoom:1;}

I won’t go into detail about the what’s and why’s of this.  It’s a hack (as per usual) that exploits the fact that IE’s filters don’t use ClearType functionality to prevent possible other problems.  You can read more about the hack and download the source files at AllCreatives.net (including the 1×1 px hIEfix.png required for this to work).

The second problem has been dubbed FOUT (Flash Of Unstyled Text).  In WebKit (Safari & Chrome), text that is styled in custom fonts doesn’t actually load until the font loads.  Other browsers, most notably Firefox and Opera, load the fallback or a default font first, then the custom font when it downloads.  This is FOUT, and can be jarring to the user.  There’s a couple of best practices here and then some ideas on how to fight the FOUT.

FOUT best practices:

  • Keep your fonts small.  Just like images, the smaller the font file size is, the faster it will load, and the less time the browser will take downloading it.  Tools like FontSquirrel’s font generator can actually reduce the size of the font, and if WOFFs become standardized, that will help out as well since they’re compressed.
  • Load your fonts first.  Most browsers work on a first come-first served basis for all elements, so putting your fonts right up at the top will help get them loaded first.  If you’ve got your font declarations in your normal css file, load that first.  If they are in a separate css file (which isn’t a bad idea), load that.  A rule of thumb is to load your font right underneath the according to a presentation given by the guys at Unmatched Style, it decreases the load time for the font.
  • Subset fonts.  Fonts often come with hundreds of different characters, including special characters, which you may or may not be using.  Off the top of my head, I can think of several fonts that have the same characters for upper- or lower case letters.  If you don’t need the extra characters, you can just not include them in your font and this will make the font size smaller.  This is another thing you can do with the FontSquirrel generator.

If all else fails and you still need some help with the FOUT issue, there’s a couple of hacks you can try.  Like the “smiley” @font-face declaration, these come from Mr. Paul Irish who writes about fighting FOUT.

The first thing you can do is preload your fonts.  This is similar to the method of preloading images that display on a hover event where you use a display: none; or a visibility: hidden; or push it all the way off the screen somewhere in, like, left: -999em;.  Let’s say you’ve got two fonts you’re using on your site:

  1. @font-face {
  2. font-family: 'ChunkFive Regular';
  3. src: local('ChunkFive Regular'), url('fonts/Chunkfive.otf') format('opentype');
  4. }
  6. @font-face {
  7. font-family: 'League Gothic';
  8. src: local('league gothic'), url('fonts/LeagueGothic.otf') format('opentype');
  9. }

We’ll create some CSS styles to call those like this:

  1. .chunk { font-family:'ChunkFive Regular'}
  2. .league { font-family:'League Gothic'}
  3. .allfonts { font-family: 'ChunkFive Regular', 'League Gothic'; }

Now, in the actual body of the page, we’ll preload those fonts:

  1. <!– preloads both fonts in gecko and opera, webkit only gets the first –>
  2. <b class="allfonts" style="position:absolute; visibility:hidden">download please</b>
  4. <!– preloads all the fonts in the fontstack in gecko, opera, and webkit –>
  5. <b class="chunk" style="position:absolute; visibility:hidden">download please</b>
  6. <b class="league" style="position:absolute; visibility:hidden">download please</b>

Personally, I think the .allfonts class is overkill if you’re calling both of them individually anyway, especially given that that’s targeting WebKit and WebKit isn’t our problem.  IE will download the fonts when they are declared, so this doesn’t affect IE at all.  Also, one thing you should be aware of if you decide to use this method is that it won’t validate, if that matters to you.

The other option is to target Firefox directly with this javascript which asks Firefox to act like WebKit, e.g. don’t load the text until the font has loaded.  For really slow-loading pages, there’s a 3-second fallback so people aren’t waiting forever for pages that take a really long time to load.  To do that, you will put this in your <head>:

  1. (function(){
  2. // if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
  3. var d = document, e = d.documentElement, s = d.createElement('style');
  4. if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
  5. s.textContent = 'body{visibility:hidden}';
  6. e.firstChild.appendChild(s);
  7. function f(){ s.parentNode &amp;&amp; s.parentNode.removeChild(s); }
  8. addEventListener('load',f,false);
  9. setTimeout(f,3000);
  10. }
  11. })();

This isn’t going to absolutely fix the problem either.  All of these are just ways to try to avoid the FOUT issue and none of them are foolproof, but they can help.

Alternate methods

There are some other methods for calling custom fonts.  One that I mentioned at the beginning is Cufón.  With Cufón, you must have, or link to, the source javascript, so the first part is to either their generator (or FontSquirrel’s generator).  When you have both files, you’ll call them in  your like this:

  1. <script src="cufon-yui.js" type="text/javascript"></script>
  2. <script src="Vegur_300.font.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4. Cufon.replace('h1');
  5. </script>

As you can probably guess, Cufón works by substituting its font in a given class (h1 in the above example).  If you want to use multiple fonts, you can do that with this:

  1. <script src="cufon-yui.js" type="text/javascript"></script>
  2. <script src="Vegur_300.font.js" type="text/javascript"></script>
  3. <script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
  4. <script type="text/javascript">
  5. Cufon.replace('h1', { fontFamily: 'Vegur' });
  6. Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
  7. </script>

It’s a little clumsy compared to @font-face and some of the other alternate methods, but if you’ve used sIFR (and by used, I mean embedded by hand, not just used a WordPress plugin), it’s probably pretty familiar.

Typekit has a bit of a roundabout method mostly to maintain control over commercial fonts and to make sure that only the font that was selected from the site and registered to you for use on the site you’ve registered with Typekit will display.  For the most part, though, it’s just two lines of javascript and a CSS class you set on the site; so, similar to what we’ve been doing already.  There are a few other companies, like Extensis with WebINK, that are jumping into the webfont market that handle it similarly.  In any case where you’re using a service, you’ll more than likely be using a javascript to contact the service and retrieve the font.

As of May 19, 2010, Google has launched their own webfont service and, for what it’s worth, it seems really promising so far.  They are using open and Creative Commons-licensed fonts and have an easy to use font directory (with only a handful of fonts right now — hopefully this will grow as time goes on).  When you find the font you want to use, you just need to click “Get the code” and voila there’s your source, which, in this case, is an externally hosted stylesheet like this:

  1. <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Then you just need to call the font normally in your CSS.

  1. h1 { font-family: 'Droid Sans', arial, sans-serif; }

The Google Webfont API also includes a webfont loader.  I haven’t played with this yet, but it appears to be similar to the preloader I mentioned earlier.  One interesting point to the webfont loader is that it’s written to allow fonts that are being loaded from other sources, not just Google.  It was co-written with Typekit, so of course Typekit can be called with the loader as well, like this:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
  2. </script>
  3. <script type="text/javascript">
  4. WebFont.load({
  5. google: {
  6. families: [ 'Tangerine', 'Cantarell' ]
  7. },
  8. typekit: 'myKitId'
  9. });
  10. </script>
  11. <style type="text/css">
  12. .wf-inactive p {
  13. font-family: serif
  14. }
  15. .wf-active p {
  16. font-family: 'Tangerine', serif
  17. }
  18. .wf-inactive h1 {
  19. font-family: serif;
  20. font-size: 16px
  21. }
  22. .wf-active h1 {
  23. font-family: 'Cantarell', serif;
  24. font-size: 16px
  25. }
  26. </style>

Confused by all the options?  Here’s a comparison of FontSquirrel-generated fonts vs. Typekit vs. Google Webfonts.  This gives you a bit of an idea of how each font is rendered, and it’s all HTML/CSS so you can check this page in multiple browsers to compare browser compatibility.

And that’s pretty much it.  Before going, I should mention that FontSquirrel also has premade kits for a variety of different @font-face embeddable fonts, so it’s a good idea to see if the font you’re looking for already has a kit.  Also, some browsers don’t automatically bold or italicize some custom fonts so, like in print design, you need to declare the bold or italic variation separately.  There’s more discussion on that, if you’re interested, at the end of the Unmatched Style @font-face presentation.  Thanks for reading this far — I tried to make this as comprehensive a post as I could so if you know of any tips, tricks, hacks or other sources, let me know in the comments!


2e6c0a0ecb51c9d67263485a1713294d Jumping on the webfont bandwagonChris Reynolds is one half of Arcane Palette. He has a personal blog, jazzsequence, where he writes about music, technology and social media and shares links, videos, and posts various personal music and writing projects.

thinktank affiliate buttons, vista experience, computer woes resolved, and other stuff

so we got a new client for thinktank.  it’s a wordpress blog, and it’s mostly maintenance and updates, but it’s still pretty cool.  our client wants to build/integrate a social networking component, so i did some researching and found KickApps Social Networking Software.  the more i read into it and compared the alternatives, the cooler (and more KickAss) KickApps became.  they run a SaaS — Software as a Service, an intriguing concept Wired wrote an article about a while back.  what it means in this case is that the social networking software is provided by and hosted on KickApps’ servers.  you setup the gateway, and everything else lives on their side.  which means less twiddling, infinitely easier setup, no maintenance (other than cosmetic stuff) and also means, for them, that they get to control the flow of traffic and how things work monitarily.  you see, as a free service, they control 2/3 of the ads that show up on the site.  1 of the 3 ad banners you control and can set up as you please.  there’s an option to buy out the ads, but according to the video on their site, it starts at $100/month for 5000 clicks — not a small-scale deal.  they have an impressive client list though; professional sports teams, vibe, npr, universal music, etc.  and it plugs right into the standard cms apps.  not just joomla! and drupal but also wordpress.  it’s exciting enough of a concept to tempt me to create an account and set one up here.  even though, you know, no one visits me, really.

i also just finished optimizing this blog for search engines.  from which i learned a few things about seo-friendly coding, and hopefully does something to counter the last part of the paragraph above.  all this seo’izing and working on a new blog made me think of making affiliate buttons for thinktank.  well, the other thing that made me think of that was the email i got that said that firefox set the world record for most downloads in a 24 hour period for the firefox 3 download day campaign.  it all made me think that creating more ways for people to link back to thinktank couldn’t hurt, and the buttons are prettier than my cleverly unobtrusive “website designed by thinktank” tag at the bottom of our sites.  oh, the other thing the seo stuff taught me (or reminded me, really, i already knew it, but i wasn’t implementing it) was that it’s better to link the whole phrase “website designed by thinktank” than just the “thinktank” which is what i was doing before.

in other news, i got my computer working again, although i haven’t had a chance to look at the old hard drive, see if it’s usable, and figure out wtf happened.  for, you know, fun, and because i wanted to figure out what hardware i should get, or more accurately, if the hardware i was planning on getting would be comparable, i downloaded 3Dmark06 — the standard benchmarking tool that gaming magazines use to rate.  it seemed kind of silly to be using this benchmarking tool that i’ve read about in computer gaming world, but i wanted to see how erin’s system (roughly the equivalent of my broken system) compared with the media center which i was using (roughly the estimated equivalent of what i would be using).  i made a fatal error in doing this — while the mainboard and processors would be comparable (the mainboard i got was a mini version of the one i’m using in the media center) the fantastic graphics i was experiencing in guild wars on the media center was not due to a highly advanced onboard graphics processor which was my assumption at the time.  in fact, it was from the graphics card i got for the media center specifically because i needed s-video out to go to the tv.  as such, erin’s computer with an nvidia geforce 6600 ranked about a 600 and some change on the 3Dmark06 test.  the media center (not designed as a gaming computer by any means and only holding 1gb ram) ranked a 300.  these were, of course, piddly compared to the high scores of people who actually cared to build a gaming system and uploaded their scores to futuremark’s database.  so my plan was to get 4gb ram to overcompensate.  but, as i wrote in one more to file under “it’s always something”, i only had 2 ram slots and my power supply wasn’t spiff enough anyway.  so, having to order a new power supply, i also ordered a new graphics card as well, an off-brand nvidia geforce 8400gs.  it was the cheapest and most powerful solution.   when the power supply came, i started installing vista ultimate, and when the graphics card arrived a couple days later i started transitioning over to my new/old system.  in all, it’s performing well.  my new 3Dmark06 score is around 1600, and guild wars nightfall looks gorgeous — pretty much like the screenshots on their site.  so i’m a fairly happy camper and using a mostly functional operating system again.  while vista isn’t as simple and intuitive as osx and the start menu is all fuXX0red — seriously more messed up than previous versions imo — it works, the glass effects are pretty and it is better than XP and it’s no 95/98 by any means.   it’s definately an advance, albeit not a ground-breaking one.  there are a couple issues:

when i started using vista on the media center i discovered a problem — while i could create new folders (and new files through the right-click option) i could not NAME them.  i.e. New Folder.  New Folder (1).  New Folder (2).  etc. etc.  no matter what i did, i couldn’t get it to work.  apparently, after googling a bit, i discovered this was fairly common and required a registry hack to fix.  annoying, and a waste of a couple hours of banging my head on the computer screen.

random lockups and freezes in explorer, especially when accessing files on a shared network drive.  both vista computers do this so i can only assume this is fairly normal as well.  also, having to log in to the network drive after every reboot is obnoxious and i’m still trying to figure out how to save my password.  :/

so that’s the scoop.  a few quick, final closing remarks:

to answer the comment in my last post: avatars are user icon things for social apps like blogs and forums and messaging programs, but also are used by microsoft to visually represent different users.  it’s sort of the digitized representation of yourself to the world.

i’m planning on sending off my 8mm reels to get transferred to dvd in the next couple weeks.  once i get the dvd back i will rip the video, add new soundtracks and post them here (possibly to youtube as well).  i’m also going to do something about the gavin video and the guy in a hat video (guy in a hat might need to move to youtube also, just for kicks).

i want a google phone.

yes, i’m playing guild wars again.

look for joss whedon’s Dr. Horrible in a couple weeks.  it’s gonna be aweX0me.

it’s still download day…

still haven’t downloaded firefox 3?  /sigh

okay, well my first impressions are — it’s supercool.  i was always turned off by the default firefox look in 2.0.  3.0 installed and used the skin i was already using and it wasn’t until i installed it on erin’s computer that i saw how hot the new look was.  additionally, it changes depending on the look of your operating system.  i.e. i’ve got a crazy dark gray and black windows theme going on, so my firefox is gray, but erin’s is a lighter gray with a gradient which is what her windows theme is doing.  i imagine this means vista users will have black and mac users will have silver/granite and deviantart trolls will have crazy deviantart theme colors.

i haven’t explored everything yet, but all my plug-ins from 2.0 work, and the web history is a lot nicer and easier to use.  some of my bookmarks got lost on my install but on erin’s everything stayed — i think mine might’ve been saved on a network drive or something wack.

tabbed browsing is still tabbed browsing, which is to say awesome.  3.0 does seem somewhat faster, but it might be psychological.  still, i tend to have 8 million tabs open simultaneously and that does tend to cause my ‘fox to lag, and i’m less laggy these days.  the other bonus is one of the sites i use for work refused, no matter what, to remember my password and 2.0 firefox kept asking but could never keep it.  it’s a common problem and it’s a bug of the app.  well, 3.0 remembers my pw and that is awesome — i think that the overall password saving stuff is managed better and less intrusively.

so what are y’all waiting for?  you have until 10am PST tomorrow morning to at least download this thing.  c’mon, it’s free.

he’s a half-blinker

just a quick update for those who care about my crazy eye issues…

i went back for my followup appt. for my contacts. if you’re just joining us, previously i had talked about my keratoconus and that i will be wearing contacts for forever (or until it’s down to eye surgery or nothing) to counter the pointy-ness of my eyeballs.

fast-forward >> i went in for my followup. my left eye had been bothering me when i was wearing the contacts, but overall, my vision seems better when i’m wearing them (read: when i can stand to wear them). i tell the doc that it’s been bothering me so we do another exam for the prescription and tweak it a bit and try a different style lens, which feels better. but it’s as i’m wearing this and he’s staring at my eyeball through the crazy contraption thingie and he says to the student who’s in the room observing “oh, he’s a half-blinker.”


“i’m a half-blinker, eh?” i say, amused. apparently part of my problem is that i am a half-blinker. he tells me a lot of new contact wearers will blink halfway thinking (probably subconsiously that it will hurt/bother them less and apparently i’m one of these people. the fact that there’s a term for this, and that that term is “half-blinker” still strikes me as incredibly odd. but it explains a lot about why my eyes have felt like they dry out really fast and why the eyedrops only help temporarily.

the good news is that my right eye is 20/20 again with the contact with not much distortion

so i’m getting one new lens with a (hopefully) better prescription.

also, this is a reminder that TOMORROW IS DOWNLOAD DAY! so get your download fingers ready and go to http://spreadfirefox.com.