But how?  You can render static images or use tools like sIFR or FLIR to generate surrogate font renderings for you, but these each have their own drawbacks.

Assuming that you have a proper license or permission to embed your chosen fonts on the web (and please ensure that you do!) then the @font-face generator at Font Squirrel may be just what you need.

How It Works

Using the font-face CSS declaration, Fontspring has developed a cross-browser friendly syntax to nudge the requesting user’s browser into downloading and applying the proper font file format to the page where it’s needed.

In a nutshell (no pun intended), Font Squirrel’s generator takes a TTF, OTF, or PFB font file and generates every format necessary to support IE5+, Firefox 3.5+, Safari 3.1+, Chrome 6+, Opera 10+, and iOS 1+.

Trying It Out

Once you’ve uploaded your font files and chosen options (or ignored them — the generator works fantastically well on “Easy”), you are provided with a web kit download that contains the file formats, a CSS file, and a sample page for each uploaded font.  Opening the sample page in various browsers will show you the results before you commit to grafting the solution into your website.

Getting the Fonts Installed

When you’re ready, upload the generated font files into the same directory as the site’s CSS file.  Next, copy the contents of the web kit’s CSS file into that of your site.

It’s done!  You can now use the fonts within your site by way of the font-family declaration.  Just use the same font-family values referenced in the @font-face block and you’re off and running.

Alternatively…

When in doubt over the licensing of any given font, Font Squirrel provides a slew of free commercial-use font kits, and Fontspring (the creators of Font Squirrel) sell an even wider range of OpenType fonts which are explicitly licensed for use with this method.

Happy fonting!

The most concerning aspect of both of these bills is that our country’s decision makers stand behind SOPA and PROTECT IP as written to champion American interests and intellectual property ad, in turn, protect the American entrepreneurial spirit, our jobs, and our financial security.

In fact, both bills will ultimately fail to accomplish the intended goals and are, in the process, set to squash many of the freedoms we take for granted from a free-flowing Internet.

Stop Online Piracy Act (SOPA)

“To promote prosperity, creativity, entrepreneurship, and innovation by combating the theft of U.S. property, and for other purposes.” – H.R.3261

What It Does:

This  bill would allow copyright holders and the Department of Justice to seek legal action against websites accused of facilitating copyright infringement, and to force service providers to block offending sites; this would prevent gateway services, such as Google Checkout or Paypal, from doing business with such sites and would even bar search engines from simply linking to an offending website.   For streaming content, such as YouTube, Vimeo, or a self-published video blog, unauthorized streaming of any copyrighted materials would be a crime backed by up to 5 years in prison after 10 incidents of streaming copyrighted music or video within a six month period.

PROTECT IP Act

“Preventing Real Online Threats to Economic Creativity and Theft of Intellectual Property Act of 2011” – S.968

What It Does:

As the bill states:  “An service provider of an information location tool shall take technically feasible and reasonable measures, as expeditiously as possible, to– (i) remove or disable access to the Internet site associated with the domain name set forth in the order; or (ii) not serve a hypertext link to such Internet site.”   Additionally, the information location tool, which is largely refers to Search Engines but can refer to any site, must delete all hyperlinks to the offending “Internet site.”  The net effect is that, without an up front burden of proof, Internet sites can be censored until such time as their names are cleared, no matter how long that takes, and without remedy if falsely accused and later proven innocent.

What Does All This Mean?

The summation of both of these bills is an attempt to control the flow of information on the Internet under the guise of protecting the American Dream from “rogue websites,” plagiarizers, and other intellectual property thieves.  As an organization that both uses the Internet to share materials that our are own intellectual property and that also helps other organizations share their own intellectual property, we agree with the masses that taking anything that doesn’t belong to you without any attribution or retribution is reprehensible behavior.

The language of both of these laws, however, invites other consequences.  Consider for a moment that if either of these laws had been in effect a decade ago, the landscape of today’s Internet would be very different indeed.  For starters, we would not have YouTube, Facebook, Flickr, Etsy, Ebay, Dropbox, Twitter, Twillio, Vimeo, Tumbler, Pinterest, Can.vas, or a good number of open source software projects.

What Can I Do?

That’s a fantastic question!  Tell the House and Senate that you are exercising your right as an American citizen and say:

• You do not support restrictions upon the entrepreneurial spirit this country has been built on
• Enforcement of laws in this country should always require due process
• The United States of America is not China, and you do not support a Great Firewall of America
• That Internet Blacklist Legislation would drive jobs away from this country and will not be tolerated here

Tell Them Now!

Say NO! to SOPA by contacting your House Representative: http://www.house.gov/

Say NO! to PROTECT IP by contacting your Senate Representative: http://www.senate.gov/general/contact_information/senators_cfm.cfm

Contact SOPA Supporters directly: http://gizmodo.com/5870241/presented-without-comment-every-single-company-supporting-sopa-the-awful-internet-censorship-law

After reading recently that IE is finally wearing out its welcome (except in government and huge companies), it occurred to me that I couldn’t remember precisely when I had started using Chrome as my primary frontend debugger, but that it is measured in months.

Why would someone use Chrome over IE or Firebug? Well, here are the things that I like:

Always Feels Light and Fast

I can’t quite put my finger on it, but Chrome doesn’t seem to suffer from the same bog-down bloat that Firefox does over the course of a debugging session.  New tabs and windows spring open, and script debugging is snappy.   I have to close a crashed tab occasionally, but I’d rather have that happen than experience debugger lag any day of the week.

Editing is Intuitive

Altering the DOM or CSS in-place just feels natural.  Tab orders make sense and do what I expect; adding or changing properties, styles, or elements is a breeze.

Help is Just a ? Away

Typing a question mark anywhere in the debugger presents a modal dialog with common key commands for each section.  It’s not a killer feature, but it’s more convenient than having to drill into a Help menu to remember how to increment a value by 100.

Live Tutorials in the Documentation

The documentation for Chrome Developer Tools is specifically designed for you to pop open your debugger and walk through the functionality.  This is a great way to learn-by-doing, which helps retention several times over.

Revision History!

This is, by far, my favorite new(ish) feature.  After making changes to JS or CSS in the Elements tab, switch over to the Resources tab and drill down to the file.  Expand the arrow, and you’re presented with a list of revisions for the entire session that you’ve been fiddling.  You can see what has changed in each version highlighted, and ultimately, opt to save off changes or revert if something goes awry.

Drag-and-Drop DOM

Ok, I’ll admit this is more of an oddity than anything else, especially since the revision history doesn’t extend to the HTML markup of a page.  But maybe it’s useful for rapid prototyping?  In the Elements tab you can literally drag elements around on in the DOM where you see fit.  Want to see what would happen if you switched the positions of two divs?  You can do that now!

But Wait, There’s More!

Not enough? There’s also remote debugging and the ability to pretty print minified scripts, with more features added regularly.  Check out this presentation earlier in the year from gurus Paul Irish and Pavel Feldman, and happy hacking!

Dubbed template layouts, they aim to improve ease of layout by an order of magnitude for novice to master; by using a simple block of ASCII characters, even complex printed media layouts will be within easy reach.

Give it a skim and you’ll be able to see how easy the proposed features would be to implement.  Wagger approves!

Mr Bowen seems to have forgotten that no one person or web design is ever perfect. Having been face to face with a perfect designer presenting a single perfect design, I am certain perfection, in an objective industry such as web design, is always in the eyes of the beholder.  Nothing exudes inexperience like a web designer attempting to convince a customer that something that feels so wrong to the customer is right because the designer believes it is.

The first image caption in this article says “We have to be the lighthouse, guiding the clients to shore” under a picture of a lighthouse.  My first thought was someone should let Mr Bowen know that his “perfect” design for the Lighthouse Manufacturers Association of New England was rejected by the customers because he failed to understand the core responsibility of lighthouses. Lighthouses do not guide ships to shore; they actually guide captains away from shore to avoid the rick rack that could cause trauma to their boats. While of course there is no Lighthouse Manufacturers Association of New England and I am sure Mr Bowen would have researched the purpose of a lighthouse had he done such a project, if one existed but this does point to the heart and soul of this article:

The website designer should defend a design that s/he sees as perfect because they know more than the client does.

Consulting 101 fail; this mentality is the reason why the movie Office Space was so successful with the concept of the dreaded “consultants.” And furthermore, why clients inherently feel so defensive of their ideas with consultants. Given the array of options a client has when choosing a web design and development firm in the Northern Virginia DC Metropolitan area, asserting personal perfection seems like a good way to decrease the number of clients you have.

Perhaps it is only our job to fill the gaps the customer’s expertise are unable to fill instead of assuming our outside view of their business process gains us more insight then they have from the inside?