What the Font ?

Using Selective Font : Web Designers have known the trick / procedure for incorporating their own selective Font Face now for some time , through various font embedding methods. While visiting certain sites you will notice as to how they have their own selective Font Face throughout the Entire Page and not just the Header Title(s) .

After some Font Searching , I finally got down to the Font of the Matter. It seems that choosing to use or incorporate your own font [ whether you have downloaded it from another font source site , or whether you have created it yourself - , which in fact is much more preferable ; since 97% of the fonts one finds on the web for download are copyright & belong to their respectful authors / creators & are not permitted for commercial use, is much more preferrable .

Thus : being able to create your own font face will be a less complicated endeavor at this point . ] Now the process of incorporating your very own or : Permissibly / Allowed Commercial Font is not such a perilous undertaking at this point . In fact it is much simpler than one would imagine , and if you are truly desperate to display your own Font of choice within your Website , or Blog – then you simply need to follow certain steps in order to achieve the desired results.

Now while it’s theoretically possible to utilize any font you want for a web site, in order for it to display properly, each visitor/ user must have that particular font installed on their computer in order for your custom font to display onto their browser as well . Because of this requirement, web typography has been a wasteland, limited to only a short list of commonly available (web-safe) fonts.

There have been several attempts to circumvent this problem and below, is a list of some of the most common. All have their short-comings and for me – no disrespect to very creative, determined and knowledgeable people – they all fall into the category: “life shouldn’t be so hard”!

Typography as a graphic is seen by everyone – except search engines – and one has to play CSS games, to attempt to achieve both objectives.

sIFR means “Scalable Inman Flash Replacement”, based on work done by Shaun Inman, et. al. A convoluted solution that relies on JavaScript and Flash technologies to replace web-safe text with a Flash image of the text, in your chosen typeface.

A JavaScript Image Replacement technique that’s a worthy alternative to sIFR. The name is derived from “CUstom FONts”.

A server-side PHP script that dynamically generates images of text in the font-face of your choosing. PHP5 is recommended and requires GD library (with FreeType and PNG support enabled).

CSS3 @ Font-Face Embedding to the Rescue :

Even though the ink is still drying on the official June 30th release of FireFox 3.5, which supports the @ font-face CSS3 selector, there has been much buzz about how this will herald a new, creative web-font landscape. Truth is that Safari has supported @ font-face for a while now and Opera 10+ is reportedly going to be supporting supports it as well.

In the Inspect Element Web Design & Development Blog, Tom Kenny writes, “Currently only Firefox 3.5 and Webkit browsers such as Safari and Google Chrome will render [the @ font-face selector]. Of course, older browsers such as IE6 and IE7 will not support it and with IE8′s distinct lack of CSS3 feature [sic], that doesn’t support it either.” ( Source : Go Beyond Web Safe Fonts w/ CSS3

I know it’s popular to bash Internet Explorer, but Tom (and others) need to check their facts before they publish false information.

Firstly, Microsoft has been supporting font-embedding for over a decade (since IE4 in 1997) and also the font-face tag and @ font-face CSS selector. Secondly, the @ font-face selector was a 1998 CSS2 Recommendation

Secondly, Chrome doesn’t support @ font-face by default. (Apparently, Google supported it in an early beta release and then disabled it for subsequent releases, for “security reasons”. To activate it, users must add a command-line switch –enable-remote-font .) source

The beauty, of course, is that it’s now possible to embed fonts for IE6, IE7, IE8, FireFox 3.5+ (PC & Mac), Safari (PC & Mac) and (soon) Opera 10. According to the June 2009 web stats, that’s over 97.5 percent of our visitors – about as “cross-browser” as you’re going to get in today’s online world!

How @ font-face Works:

The great news about CSS3 support of the @ font-face selector, is that – unlike work-a-round techniques – it’s easy to use. Yay! Fonts without hoops!

Just upload the font file you want to use to your server – making sure that you’re not violating any copyright rules – then embed it, using the following CSS:

Code:

@ font-face {
font-family: yourFontName ;
src: url( /location/of/font/FontFileName.ttf ) format(“truetype”);
}

/* Then use it like you would any other font */
.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
}

The CSS code above defines a font called “yourFontName”. You may use the actual font name – or – for testing purposes a unique, made-up name. Whichever you use, all you need to do is reference it again in the CSS, wherever you want to use it.

That’s it! Note: the CSS3 specification provides for several font formats: “truetype” (ttf), “opentype” (ttf,otf), “truetype-aat (ttf), “embedded-opentype” (eot) and “scalable-vector-graphic” (svg,svgz).

Is it Really that Simple?

ummm … of course not!

If there’s one thing we’ve all learned about the Internet, nothing is really that simple and embedding fonts using the “new” CSS3 @ font-face selector isn’t any different.

“So, what’s the issue?” you might ask.

Though Microsoft has been supporting font embedding since IE4 (1997), it’s current support for @ font-face is done a tad differently. Different enough, that it will ignore a pure, valid CSS3 version. Internet Explorer supports only their proprietary “Embedded OpenType” font (eot) file format and it will incorrectly parse CSS that includes “format” values.

Now in order to achieve cross-browser compatibility, one must create some redundant CSS. The overhead isn’t much and the gains, of course, are great. Using Microsoft’s free WEFT tool (or this easy Online TTF->EOT Converter , one can create a Microsoft proprietary OpenType font file (having an
EOT extension). Upload both the EOT and TTF files to your server. Using a single @font-face selector, load the Embedded OpenType font (EOT) for IE6, IE7 and IE8 first then the TrueType Font (TTF) for FireFox 3.5+, Safari (Win & Mac versions) & Opera v10+. BOOM … you’ve just served the vast majority of your website visitors. In addition, the process degrades nicely. Browsers that aren’t able to load your special fonts won’t miss a thing, as they’ll be using the secondary, tertiary or generic fonts you specify. Additionally, the process is relatively future-proof. If Internet Explorer ever does support the CSS3 @ font-face rules, then it’ll simply utilize that bit of code already there. If not, you’re covered there too.

An example of some final, CSS3-valid code might look like this, for a cross-browser compliant embedded font:

Code:

@ font-face {
font-family: ” your FontName “;
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(” real FontName “), url( /location/of/font/FontFileName.ttf ) format(“truetype”); /* non-IE */
}

/* THEN use like you would any other font */
.yourFontName { font-family:” your FontName “, verdana, helvetica, sans-serif;
}

Though you can name use any font name, use the real one (capitalization matters) for the “local” declaration. This will give non-IE browsers an opportunity to look for the font on your visitor’s computer. If it’s loaded, it will save a TTF download. (Note: The local declaration is required, because it confuses Internet Explorer, which will fall back to the EOT file without trying to download the TTF).

Because FireFox 3.5+ supports the CSS3 @ font-face selector, cross-browser font embedding is now both possible and practical. The effect this will have on the web should be dramatic, replacing a decade-old typographic wasteland with a tastier and richer diversity of fonts.

While cross-browser deployment isn’t ideal, the benefits of utilizing CSS to embed fonts is obvious: It’s lightweight; it’s valid CSS (CSS3); it’s easy to do; it’s search engine friendly; it’s cross-browser compatible; and (yay) it relies neither on either JavaScript or Flash. The only downside is the slight overhead in downloading font file(s) and – depending on browser settings Defeating Font Embedding Internet Explorer In Internet Explorer 8, users may elect to disable font downloading or they may ask to be prompted. (I believe, by default, this is set to “enable”, so visitors would have to explicitly re-set the value and the majority won’t). ie font embedding message To reset in IE8: Tools > Internet Options > Security Tab > Custom Level > Downloads Section > Font Download (last one in the section). FireFox : In FireFox, users can elect to replace all web fonts with fonts of their choosing. (This is defeated, by default and again, it would be up to users to explicitly re-set this value and the majority won’t). To reset in FFx: Tools > Options > Content Tab > Fonts & Colors (Advanced Tab) > un-tick “Allow pages to choose their own fonts, instead of my selections above”). – may not render even for those browsers that support it. No worries! The technique degrades nicely to the normal “web-safe” or generic fonts you specify.

* You may want to give the following a look-over ; seems like a viable solution to any other issues you may encounter concerning the Upload of your .ttf or .eot files to a server ( as most servers do not allow the upload of such files ), therefore : This may just be the next best thing right HERE

And you thought it was going to be Easy Peasy now didnt you ? Life shouldn’t be so hard , but I guess it is .
Have fun within your new found endeavor & may you succeed where most have failed : Now go get your Font On !