FontDeck: Exclusive Sneak Peek

by on 4th May 2010 with 23 Comments

Today we have an exclusive pre-release sneak peek into an exciting new choice for using different fonts on the web.

Below we’ll briefly discuss what FontDeck is and how easy it is to get setup on your site. Let’s get started!

What is FontDeck?

screenshot

FontDeck is another entry into the foray of sites that use the @font-face CSS selector to allow you to easily embed attractive, web-safe fonts into your sites.

FontDeck uses pure CSS to accomplish its magic so you don’t have to mess around with JavaScript, Flash or any other additional technologies like you do with TypeKit and a few others.

Unfortunately, FontDeck is in such an early state that I can’t show you too much because the current fonts in the system are subject to change. So forgive any selective blurring as it represents content that isn’t yet final.

Setup & Font Selection

FontDeck makes it extremely easy to get attractive fonts implemented on your site in no time. Below we’ll walk through the basic process of getting everything up and running.

screenshot

Signing up for FontDeck is as easy as typing in your email address and assigning a domain. Once this step is finished you are ready to start browsing fonts.

FontDeck gives you several ways to browse and search fonts. First is the option to view by style. The current categories are Serif, Sans Serif, Slab Serif, Script, Blackletter, Display, Symbol and Non-latin.

screenshot

Additionally, you can enter a search string or browse by foundry, designer or tag.

Activating & Installing Fonts

Once you find a font that you like, simply click the activate button and select the site that you’d like to install the font on.

screenshot

Now you will receive two snippets of code that will allow you to implement the font on your site. The first is a simple stylesheet link (ex: link rel=”stylesheet” href=”http://”) to paste into the header portion of your HTML.

The second snippet is a CSS font-family that you can paste into your stylesheets anywhere you want the FontDeck font to appear (ex: font-family:”Font name”, sans-serif; font-weight:bold; font-style:normal; }).

As you can see, the CSS for the font-family is exactly like you would use normally; you don’t even have to use @font-face. That’s because the @font-face code is automatically generated in the external stylesheet that you link to in the header. You can even insert FontDeck font names into existing font-families that you’ve already setup, giving you complete control over the fallback scenarios.

Licensing

Every font you install will initially be activated within “Limited Use Mode.” Limited use mode means you can use the font for free, but it will only be visible to visitors from 20 unique IP addresses. This is perfect for testing and design so you can get a feel for what a font will look like on your site before you have to purchase it.

When you decide that you like a particular font, you can choose to buy that specific font for use on the site you have registered.

Closing Thoughts

Having tried a few other similar solutions, I found FontDeck to be one of the easiest systems developed thus far for embedding premium fonts into web pages. In all honesty, it probably took you a lot longer to read this article than it would to select a font and grab the code for your design using FontDeck.

Solutions like FontDeck hopefully hint at a bright, hassle-free future for advanced typography on the web. For now it’s still in private beta but we’ll keep you updated and let you know when it launches.

Comments & Discussion

23 Comments

  • http://fontdeck.com/ Richard Rutter

    Thanks for the great write-up Joshua. I’m pleased to say that Fontdeck will be opening up to the public very soon indeed.

  • http://rachel.learnless.info/ Rachel

    Nice read Joshua…thanks for post…

  • Pingback: FontDeck: Exclusive Sneak Peek | @DesignShack « ImJustCreative()

  • Pingback: FontDeck: Exclusive Sneak Peek | @DesignShack | SingleMeasures()

  • http://knowledgecity.com Jae Xavier

    I hope they nail down a very good business model…

    With so much competition and alternative solutions sprouting everyday, its going to be very tough.

  • http://simonjs.com simonjs

    I don’t see the benefit of using this service over doing it yourself? It’s pretty easy to convert your fonts for cross-browser @font-face use, especially with sites like fontsquirrel.com that practically do all the work for you. Am I missing something?

  • http://www.hazardawareness.co.uk Patrick

    Yea, I’m with simonjs, surley you can only use fonts that are originally licensed for online use anyway which is what fontsquirrel does for free. Is it just that font deck hosts the font for you?

    The website does look good though

  • http://leobalter.net/blog Leo Balter

    That would be nice if they host their in a CDN kind rather than sinply making us call another external link in our site.

  • http://www.anthonyjamesbruno.com Anthony James Bruno

    simonjs & Patrick

    I believe the huge difference here is that fontdeck is offering a service that will allow to you embed commercially available fonts whos foundries most likely don’t allow any other types of web embed methods.

    The difference is in the licensing.

  • http://inkpattern.com Fred K

    Most of these services – Fontdeck, Typekit, Kernest, Typotheque’s new TypeApplications service, etc – are more aimed at volume clients with high traffic sites than the Average Joe who is probably better served by FontSquirrel. And for the commercial services, looks and popularity seem to be key factors. Typotheque and Kernest have systems that outshine Typekit, for example, but Typekit gets way more mentions. Why? Better looks, more influential friends, it seems. Not that Typekit is bad or doesn’t deserve their rep, it’s just that the others tend to get overlooked a bit for seemingly superficial reasons. A pity.

    Fontdeck looks good. Will be interesting to try it out.

  • sebastian green

    I can not wait for this.

    Good article!

  • http://fontdeck.com/ Jon Tan

    Thanks Joshua, you highlighted some of our favourite bits of Fonteck. Hopefully we’ll be a useful bridge between web and type designers, making it easy for both. I can’t wait to use it myself! All the best.

  • http://www.michaeldhart.com Michael Hart

    I’m with simonjs and Patrick… cool service, but I’m sticking with open-licensed fonts and doing it myself.

  • http://www.whatisitabout.me Tony Mosley

    bring on the easy to implement and legitimate fonts for use online… sooner the better.

  • Jacinda Gomez

    Nice work! This sounds like a great service.

    Michael Hart will stick to open-licensed fonts, which is a good idea as it will suit his work prefecly.

  • http://www.jc-designs.net/blog Jeremy Carlson

    You lost me at “buy that specific font for use on the site you have registered.” FontSquirrel is free, without any extra external links. I can’t see any particular font being so important that I would pay for it for use on ONE website.

  • Paul

    Jeremy – many companies have specific fonts that are part of their branding. Until now, the only thing stopping them from using them online has been the technical limitation. I remember about 9 years ago a company insisted I make all the text on their site as images, just so they could have a specific font. Admittedly clients are more savvy these days, but to have the ability to use their corporate font will be very welcome, I have no doubt.

  • http://www.pixelflips.com Phillip

    I’m loving the ease of implementation of this & can’t wait to give it a try.

    Thanks for a great writeup, I’ve been waiting to see more info.

  • http://tattoos-u.co.il Tattoo joe

    This seems a lot better then what i currently use (sIFR) but it depends greatly on font selection.

  • http://www.ensitepedia.com/qq.com/ QQ

    Good Luck!
    I hope this could be better than typekit

  • Pingback: Då kör vi lite länkar igen « Uppdragsmedia()

  • Pingback: How to Use the New Google Font API | Design Shack()

  • Pingback: How to Use the New Google Font API | Ecko Labs()

Subscribe
Membership
About the Author