distortion » Web-Design

Custom fonts embedding: no hacks, no Javascript, no Flash.

gyo — Thu, 03 Dec 2009 23:08:24 +0000

How to use custom fonts without sIFR, or any Javascript/Flash hacks?
Here is a CSS-only solution: @font-face

You can see a demo preview here, or download the files.

Introduction
We need to convert our preferred font into 3 different formats, to be sure it will be properly displayed on all the Browsers/OS flavours:

TTF or OTF - FireFox 3.5, Safari, Opera
EOT - Internet Explorer 4+ (Yes, it works on IE too...)
SVG - Chrome, iPhone

To convert the fonts to TTF/EOT/SVG it's very easy, we'll just need one tool (or more depending on the source format).

The tools
FontSquirrel - Font Generator
This tool is amazing. It converts a TTF/OTF file to the different formats we need to embed a font in a website.
It also compresses the font allowing us to choose the characters we need, stripping out all the others, resulting in a light version of the font. go to the website

Font converter
Another great online tool to convert fonts to/from different formats (.dfont, .ttf, .eot, .pfb, .otf). go to the website

Font Forge
The opensource font authoring tool. go to the website

And now, let's get our hands dirty...

The Code
Now that we have the files we need (TTF or OTF, EOT and SVG), we're ready to embed the font in our website.
Here is the CSS code:

@font-face {
font-family: 'Museo500';
src: url('Museo500-Regular.eot');
src: local('Museo 500'), local('Museo-500'), url('Museo500-Regular.ttf') format('truetype'), url('Museo500-Regular.svg#Museo-500') format('svg');
}

With font-family, we define the name to use in our CSS rules:

h2 { font: 38px 'Museo500', Arial, sans-serif; }

As you can see, we treat "Museo500" like any other font we normally use in CSS; there are also the fallback fonts, that will be used just in case something goes wrong. Done.

Some notes
If you want to use custom fonts then this is a hard match to win for sIFR & Friends.

A negative point is that the Browser will show the fallback font until the custom one is loaded; on my humble ADSL connection it's very quick, but still noticeable.
Though, once the font files are cached it doesn't happen anymore.

It's true that many users can't upgrade Browsers because of restrictions on their systems... well, I bet they are running Windows, and @font-face works on Internet-Explorer; while if they are on a Mac it works on Safari.
The only "black-sheep" could be (surprisingly) FireFox, which only supports TTF/OTF since version 3.5 (the new version 3.6 also adds support for WOFF font files).

Last but not least, make sure the font's license gives you permissions to embed it in a website.

Conclusion
Web fonts embedding is becoming more and more supported, and I'm sure it will be soon a common practice. So, why not to start now?
This is not the latest trick to use custom fonts in websites, this is the future of web typography.

Spread the voice.

Related links
I made a light version of the subject, here you can find the most extensive and complete resources: Paul Irish and Jonathan Snook.
For my example I've chosen the beautiful font "Museo" by Jos Buivenga's exljbris Font Foundry

4 Free SVN Clients for Mac OSX

gyo — Mon, 23 Nov 2009 00:02:28 +0000

Here is a list of 4 Free SVN clients available on Mac OSX. I couldn't find one that integrates in OSX's Finder though; some time ago I wrote a post about SCPlugin, which integrates with the Finder right-click a-là Tortoise. Well, even if it's a discontinued project, and it doesn't have all the advanced features of Tortoise, I still use SCPlugin for my basic SVN tasks.

For all of you looking into something more complete and free...
Here is something ready to download!

ZigVersion

Bazaar

SubCommander

RapidSVN

Alternative sIFR-lite

gyo — Sun, 12 Apr 2009 21:09:03 +0000

I've playing around with sIFR (v2, v3 and jquery plugins) because I really love the concept behind it.
After some tests and fights I found sIFR-lite.
Dave at allcrunchy.com did a stunning job, and the result is a light-weight sIFR library (about 4k) that works better than the original, at least for me. Faster, lighter, better.

I decided to make some improvements to make it more flexible while keeping it super compact.

This version includes:
- Fixed a bug with Flash Player 10+ (thanks to a comment from Patrick)
- CSS text alignment is now supported

Please refer to the homepage of sIFR-lite for the documentation.

I do not take the full credits of sIFR or sIFR lite; the aim of this project is only to provide an alternative version with some bug-fixes, and some new features not included in the original.

Anyway... I'll be posting updates here, any input is welcome!

Free SVN Client for Mac OSX

gyo — Thu, 19 Mar 2009 15:01:21 +0000

I've been searching for a nice svn client to use in OSX: I wanted something free, lightweight, simple like Tortoise for Windows.
With svnX I was able to do the basics, but everything was very confused.

Finally I found it!

SCPlugin

It adds new item subversion in the right-click menu. Just like Tortoise, simple and efficient.
Plus it's free and open-source... cool!

Quoted from the original website:
"The goal of the SCPlugin project is to integrate Subversion into the Mac OS X Finder. The inspiration for this project came from the TortoiseSVN project."

I don't understand why this is only "advertised" by a few people... this is what I needed from the beginning and it rocks!

6 Flash Essentials

gyo — Sun, 08 Mar 2009 00:14:52 +0000

A selection of six Javascript/Flash libraries to solve common tasks in the tough world of web-design.
Here is a quick list of the essential tools to use with Flash:

VideoMaru

Easy and powerful Flash video player, it let's you to create interfaces in minutes: just draw something, convert it to MovieClip and set an instance name (like play, stop, pause...).

SWFUpload

Cool if you need to show a progress bar during uploads.

sIFR

Use any font in your website with this. It substitutes defined html tags with a Flash SWF file displaying the embedded font.

SWFAddress

Deeplink for Flash. With this library you'll be able to link internal pages of a Flash website.

SWFFit

Automatically resize your Flash movie keeping it accessible independent of screen resolution.

Flash Switcher

Smart Firefox extension to quickly switch between different Flash Player versions.

Web Design Elements

gyo — Thu, 05 Mar 2009 22:58:08 +0000

While making a website you may need some inspiration. I'm not going to talk about yet-another-cool-websites-gallery (btw i love them), instead here is a website that shows elements like headers, footers, breadcrumbs and more taken from many famous (and not) websites.

Pattern Tap

http://patterntap.com/collections/