FontDeck: Exclusive Sneak Peek
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?
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.
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.
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.
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.
Thanks for the great write-up Joshua. I’m pleased to say that Fontdeck will be opening up to the public very soon indeed.
Nice read Joshua…thanks for post…
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.
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?
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
That would be nice if they host their in a CDN kind rather than sinply making us call another external link in our site.
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.
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.
I can not wait for this.
Good article!
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.
I’m with simonjs and Patrick… cool service, but I’m sticking with open-licensed fonts and doing it myself.
bring on the easy to implement and legitimate fonts for use online… sooner the better.
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.
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.
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.
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.
This seems a lot better then what i currently use (sIFR) but it depends greatly on font selection.
Good Luck!
I hope this could be better than typekit