Google announcement
@font-face {}
@font-face {}
@font-face {}
@font-face {}
@font-face {}
@font-face {}

Our Google Announcement :(

Google have recently announced that they are also entering the web-font market - with the same free, hosted model as ours.

Although we have put 100's of hours into the design, development and readying of 150+ fonts (x4 formats = 600!), with only weeks before font-face.com was ready to go live, we have decided to bow out now. A bitter blow to the team.

Our decision has not been easy. Although we feel we would offer a better service, we would after all be competing with Google. A massive might to compete with.

The last thing we would want is to host fonts for everyone to link to, only to at some point (after google have beaten us) be forced to turn them off - destroying your website designs.

So as not do disappoint you in the future, we have decided to stop now. Have no fear though - we will be back! We are hatching a new plan for font-face.com - stay tuned!

font-face.com will still be the home of everything font-face, just not in the original way it was intended.

Thanks

The font-face.com Team x x

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.

For instance:

The font used throughout this site is Delicious and can be found at www.exljbris.nl

Didn't see any difference?

Some browsers support @font-face, some do not.

The latest versions of Safari and Firefox and Google Chrome support @font-face and Opera is planning to support it soon.

comparison - with and without @font-face

Internet Explorer has supported it since 5.5! Shock horror! Although they decided to use a non standard font format - which isn't helpful.

Okay, so this example is quite a difference, but it needn't be as severe.

We have actually implemented this incorrectly to prove a point, normally you would set fall backs, just like you would normally in css.

For example:

font-family: Georgia, "Times New Roman", Times, serif;

The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options to extend its features.

Initially you define the rule, "font-family" is what you want to call the font, "src" is where it can be found, include a "font-weight" (not needed for normal, but required by everything else, bold, thin etc).

@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
    font-weight:400;
}

Then just use it like any other font in any other style rule.

p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

That's pretty much it for basic implementation. Please see our 'Find out more' section to find more in depth articles. When the blog is up and running we will post lots of tutorials explaining the who, what, where and why of @font-face.

The final goal:

An online repository of fonts for use with the css rule @font-face - FREE

Hey, don't forget to check out our google announcement.

:(

License issues

The biggest reason @font-face hasn't taken the world[wide web] by storm is due to the licensing issues. They simply do not allow it. Some foundries are starting to, at a price.

We believe we can solve this without charging, without javascript and without hassle.

Share it - give it away for free

The designer/foundry upload their font. They agree that by uploading:

  1. They own the rights to the font
  2. They allow its use with @font-face
  3. They allow anyone to link to it from font-face.com
  4. They allow downloads

Effectively they provide a free font for use with @font-face. We will store that font in an online repository. Designers and developers can then link to the files in their css, using the @font-face style rule.

It's a little bit like the google ajax library, only with fonts.

Why would I give my font away?

We value the work of font designers very highly. We know an incredible amount of work goes into creating a font and think font designers should be rewarded for their efforts.

Use us for exposure - upload one of your fonts and promote your other ones.

If you submit fonts to free font libraries, then this is perfect for you.

Send us ideas that could help promote you. For instance, designer pages have been proposed - these could link to all your fonts - those on font-face.com and also those in your own library.

We need your help!

We are at the pencil and paper stage - mockups, concept, drawing/story board... waccom tablet - you get the point.

We need you to throw ideas at us, inform us of issues we might not have spotted, send us links (or drinks - thankyou!), or anything else you may think is relevent.

Are you a font designer and want to submit a font (we need some to start with) or do you know anyone who might be interested?

If you have something to say fill out the form here. We will do our best to reply to every message. (apart from alien/religious/surfing/etc related ones)

It's all about you

We are doing this for the community - it's for YOU.

Help us implement the features you want.

We are listening. (Well, we read our emails)

Show your support! Message us here with words of support - it may ensure @font-face priority on our list of jobs.

Constructive criticism welcome - but don't be too nasty, we don't want to tarnish our innocent spirits.

W3C CSS3 working draft
An excellent document from W3C - Draft specification of @font-face
Mozilla (Firefox et al) blog
The best overview / tutorial / resource we have found. From the devs at Mozilla.
Webfonts.info
A nice list of fonts for embedding. Please comply to the license restrictions.
fontsquirrel.com
Currently the best solution available, in our opinion.
Bulletproof @font-face syntax
Article by Paul Irish detailing the very best implementation.

Twitter

Okay, firstly follow us on twitter. We are @font_face_com.

Here's a great big blue illustrated bird to make it blatantly obvious we are on twitter. If you click it you'll go to our twitter page - imagine that!

@font_face_com

Okay, so it's not great, or big, or blue, but it sure is tweet! (oh dear)

Yes it would have been nice to get font-face - because then our name would have been @font-face. But twitter don't allow hyphens. #fail

Email

If you fill out the simple sign up form here, we can keep you updated with any significant ideas, plans, questions etc.

Don't worry we won't sell/give your details to anyone else. Also we're not in the habit of spamming you: we simply do not have the time nor the inclination.

Other communication portals

Occasionally we use other means of communication. These are detailed below in an unordered, ordered list.

  1. Smoke signals
  2. Shouting
  3. Private, off the record conversations
  4. Sign language
  5. Blinking
  6. Sky writing

And if you see fireworks - we might have just gone live. (Or something else)