I was skeptical at first. I mean, a service that requires you to change your DNS hosting is asking a lot. It didn’t take long for me to realize how beneficial the 5-minute setup was.

Before I go on, let me make it clear that I’m not using any affiliate links here. I genuinely love CloudFlare’s technology and believe that everyone should be informed.

CloudFlare claims to be a performance and security enhancement. At the DNS level, they intercept traffic and weed out the bad requests (i.e. spammers, unwanted bots, malicious IPs, and more) before they even get to your server.

Additionally, they can insert Google Analytics tracking code for you. They can obfuscate email addresses to protect them from spammers. They cache your site’s resources around the world and are able to return the files directly from the cache server that is closest to the visitor. I could go on, but you get the point … they do a lot to speed your site up and keep it safe.

The proof is undeniable. Take at look.

• Average pageviews per visit rose from 2.06 to 3.98 – 90% better!
• Bounce rate fell from 61.98% to 3.57% – 94% better!

I also had an average of 48 spam comments before CloudFlare … after, an average of 6.

These stats don’t mean much without an explanation. It should be obvious though. CloudFlare stops all the bad traffic from ever getting to my site, so Analytics is only tracking quality traffic. So my human visitors click around the site more and don’t leave immediately as opposed to bots and spammers. These stats don’t prove their experience is any better — although it should be. The increase in pageviews may also be due to the better load time due to the caching.

With all of the crappy traffic excluded my traffic stats are a much more accurate representation of my authentic visitors.

The image above shows the traffic that tried going to my site. You can see that 81% of my traffic was from non-threatening, real users like yourself. The threats were weeded out and not allowed into my site.

There are some caveats to CloudFlare. Because they are brand new there have been a few hiccups. For instance, I’ve experienced an increase in downtime because they’ve made some hardware changes since their number of customers blew up after the TechCrunch coverage. Its minutes worth of downtime so I’m not worried. With time their DNS hosting will improve.

By now you might be expecting to pay a pretty penny. You’d be dead wrong. In fact, the basic services are free. You can pay for advanced security and real-time stats, but all the benefits I’ve seen are achievable through a free account. Really, give CloudFlare a shot. I wouldn’t have spent this much time doing a CloudFlare review if it wasn’t worth it.

The obvious reason for lack of web-safe fonts is that displaying a font on a website requires it to be installed on the computer viewing it — of which only a handful are universally accepted as common enough to be web-safe.

A technique called @font-face was invented to remove the dependence on a user’s computer and instead use fonts from the web itself. So, in short, it pulls fonts from a web server rather than a local computer, making them viewable by anyone…almost.

Slow Browser Support

While @font-face does its job well, we’re stuck relying on browsers to support the feature. Surprisingly, Internet Explorer was an early supporter — since version four. The limitation is that it required fonts of a certain font file type that was/is infrequently used (.eot).

Fast forward to today and now every major browser supports @font-face in some sort of fashion. Firefox just announced support for the newest supported font type: .woff. So the web font is still evolving, but the big question: is it safe to use yet?

Yes, you can use @font-face successfully in all current versions of major browsers!

The Wait Is Over

All major browsers now fully support @font-face. You’ll need to pay close attention to which browsers accept which font types, but as long as you provide all of the different font types required you’ll achieve the desired effect.

Browser	.otf TT, .ttf	.otf PS	.eot	.svg	.woff
IE4+
FireFox 3.5
FireFox 3.6
Chrome .3
Chrome 4
Safari 3.1+
Opera

What Fonts Can You Use?

Any font can be used now with the availability of font converters. The best font converter I’ve found is Font Squirrel’s @font-face Generator. With many different settings for generating the most compatible font and the option to generate all possible font types, Font Squirrel’s generator is amazing.

Seriously, Any Font?

First, any font can be used assuming a font generator is able to properly render all  of the necessary font types .

However, judgment is necessary in which fonts you choose. Because you’re placing fonts on a server and making them publicly available you cannot use fonts that restrict distribution. So, only fonts that explicitly allow the use of a font for whichever purpose you’re intending (commercial, non-commercial, non-profit, etc.) are allowed to be used. In other words, if you have to pay for a font you likely cannot use it.

As An Example

The header above (As An Example) and many other elements on this page are using the font Graublau Sans Web, a free font available for use on the web.

Using @font-face

I think the easiest way to understand how to use @font-face is to simply download a font package from Font Squirrel and look at the stylesheet provided.

Available Font Types

TrueType (.ttf)

TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. Source

OpenType (.otf)

OpenType is a format for scalable computer fonts. It was built on its predecessor TrueType, retaining TrueType’s basic structure and adding many intricate data structures for prescribing typographic behavior. Source

OpenType PS (.otf)

In addition, we have the PostScript (PS) “flavor”, sometimes known as OpenType PS or CFF-based OpenType and having an “.otf” file suffix. Adobe and font producers including Elsner+Flake, Emigre, Storm and URW++ typically produce fonts in the OpenType PS flavor. Source

OpenType TT (.ttf)

OpenType terminology redefines Windows TrueType fonts as “the TrueType (TT) flavor of OpenType”, sometimes called OpenType TT and having a “.ttf” file suffix. Microsoft and other font producers including Linotype typically produce OpenType fonts in the OpenType TT flavor. Since OpenType TT fonts are for all practical purposes internally the same format as Windows TrueType fonts, there are no problems getting such fonts to work in Windows. Even Windows 3.1 from 1992 will display such fonts. Source

Embedded OpenType (.eot)

Embedded OpenType fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. Source

Scalable Vector Graphics (.svg)

Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). Source

Web Open Font Format (.woff)

The format itself is intended to be a simple repackaging of OpenType or TrueType font data, it doesn’t introduce any new behavior, alter the @font-face linking mechanism or affect the way fonts are rendered. Many font vendors have expressed support for this new format so the hope is this will open up a wider range of font options for web designers. Source

Also, from now on I’ll be using the Ultimate Website Checklist while creating sites. This will ensure all the Ts are crossed and Is are dotted…literally.