Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 18 2012

07:00

January 07 2011

13:21

Creating And Distributing Presentations On The Web

Advertisement in Creating And Distributing Presentations On The Web
 in Creating And Distributing Presentations On The Web  in Creating And Distributing Presentations On The Web  in Creating And Distributing Presentations On The Web

Delivering great presentations is an art, and preparing the slides for them very much so, too. But we’re not going to talk about that. We’re also not going to get into the debate about whether to use open or closed technologies to create slide decks — this is something you need to hash out yourself, and there are some interesting discussions going on.

What I will talk about is how I (and you, of course) can use the Web to find content for your talks, record them, share them with others and save them for future audiences. I’ll also explain how to share it all for free and how to convert closed formats into open ones by using the Web.

In 2010 I delivered a boatload of talks that people attended, downloaded, commented on and remixed for their own training sessions and presentations. I love to share my research and information, because when you set them free they can inspire and help others to get their own voices heard. Here’s how I did it.

Free Tools For Recording And Spicing Up Talks

Let’s begin with the only paid-for system I use in the whole process: I write my slides in Apple’s iLife application Keynote. I use it because when I do my work I’m usually offline (on trains, in airport lounges, in hotel rooms without free connectivity, etc.).

Keynote is great: I can resize and mask images, embed video, export as PDF, and there are a lot of beautiful, subtle and effective animations and transitions. Creators of slide tools should view Keynote as a model, and 280slides actually did so. Apple should also consider using a standardized format for HTML slides to import; in fact, this is one of the interesting discussions going on.

If I need to use high-quality images, I don’t spend money or time getting licensed content. Instead, I go to the advanced search option on Flickr, find photos with Creative Commons licenses and use these. All I need to do then is publish a link with each photo in my slides. Even I can do that much for copyright law.

Advanced-search in Creating And Distributing Presentations On The Web
Flickr’s advanced search interface lets you specify the license of photos. You’ll probably want “Creative Commons” or “license-free.” Also check out The Commons for good old photos that have been donated to Flickr by libraries and museums.

Sharing Slides, Archiving The Originals

When I finish working, I give my talk using Keynote and export it as a PDF for sharing on the Web. I share my talk by uploading it to SlideShare, which entails the following:

  • The talk gets converted to an embeddable Flash movie;
  • The talk becomes an HTML transcript shown on the SlideShare website;
  • The talk is hosted on its server, which means I don’t have to pay for traffic;
  • People can “favorite,” bookmark and comment on my slides.

In addition to hosting my work on SlideShare, I usually also zip the original Keynote file; Keynote doesn’t format presentations as individual files, but rather as a folder of resources. I upload them to Amazon S3, where I pay a few pennies a month to store heaps of data. This is my back-up archive should anything terrible happen to SlideShare or my computer.

Asking For Feedback, Offering Code Examples

Another interesting service for speakers is SpeakerRate, where people can — wouldn’t you guess? — rate speakers and their talks. SpeakerRate also has an API that allows you to pull out the ratings in case you want to show them off on your portfolio.

I normally host code examples from my presentations on GitHub. There, they are accessible, and I can update and edit the code without having to create my own ZIP files for people to download. It’s incredibly useful for making quick changes in response to what people have requested in comments and for reacting to questions you received during the talk.

Hosting your code on GitHub automatically begins the process of versioning. People can embed and alter your original examples, and the code is displayed with color-coding, making it readable.

Setting up an account on GitHub and getting your code in there is pretty straightforward — just follow the simple tutorial.

Recording Talks

I normally record my talks so that I can listen to them in the gym and other places where I can’t write. There’s a free tool for this that works across all platforms. It’s called Audacity. Just hit the record button and it will create the audio file where you specify.

Editing in Audacity is as easy as cropping the things you don’t want:

Audacity2 in Creating And Distributing Presentations On The Web
Large view

You can save the audio in MP3 or OGG (among other formats). I usually save them as MP3s and then add them to iTunes for tagging so that I can add cover art and other extras to prep them for the iPod.

Syncing Audio And Slides

With SlideShare, you can also create a “Slidecast” of your talks, which means syncing the audio and the slides. It’s a cool feature, but I don’t like the editor as it is; the handles used to define the start and end times of slides don’t allow them to be close together — and that can throw off the syncing. It’s also a time-consuming process. I’m working on some alternatives, and correspondence with SlideShare indicates that it is, too. Regardless, I’ve found that Slidecasts get a lot of visitors, so it can be worth it.

Recording Video

There was seldom a camera to record me wherever I spoke last year, and an amazing amount of recorded talks never see the light of day. If no camera is available to record your talk, then you can record the screen as you present.

One of Keynote’s lesser-known features is that you can record a video of your slides with a voiceover. Simply go to Play → Record Slideshow before giving your talk:

Why-of-html5 in Creating And Distributing Presentations On The Web
Large view

When you’re finished, export the video to QuickTime by going to File → Export:

Export in Creating And Distributing Presentations On The Web
Large view

If you don’t use Keynote or if you jump in and out of your presentation, then record the presentation on your computer screen. There are a few pieces of software to choose from for that.

VLC is a video player that’s free and compatible with all operating systems. It can also record the screen; go to File → Open Capture Device → Screen. You can record a high-quality video of everything that goes on. There’s even a feature that records a part of the screen by following the cursor.

Open-source in Creating And Distributing Presentations On The Web
Large view

Simply check the “Streaming/Saving” checkbox, click “Advanced,” and define a suitable location and settings for your video:

Presentation3 in Creating And Distributing Presentations On The Web
Large view

Screencasts are generally a great idea. Instead of performing live demos in my presentations, I record screencasts and embed them in Keynote. That way, I don’t need an Internet connection — they’re usually unreliable at conferences — and I can talk over the recording while on stage, rather than having to click, enter information and talk at the same time.

To screencast with a program other than VLC, I usually use the commercial app iShowU. When I was still using Windows, I had Camtasia. Both of these sit on your screen and let you record and pause easily:

Presentation4 in Creating And Distributing Presentations On The Web
Large view

Nowadays, I also use hosted services.

Screenr is absolutely fabulous for this purpose. Just start the applet on the page, grant it access to your machine, and start recording. You have five minutes, with audio. When you’re finished, the movie is automatically converted, and you can export the video to YouTube. The video conversion happens more or less in real time. All you need to sign into Screenr is a Twitter account. With Screenr you can also tweet an embeddable version of the video. If you need similar service for longer videos, check out Screencast-o-matic.

Converting Video

The free tool I use is MPEG Streamclip, and it’s available for Mac and Windows. Drag your video onto it, and select the format you need:

Mpeg-stream2 in Creating And Distributing Presentations On The Web
Large view

There are a lot of presets — iPod, iPad and so on:

Compression in Creating And Distributing Presentations On The Web
Large view

Automatic Conversion And Hosting For Audio And Video

As you know, embedding videos on websites with HTML5 can be a pain, particularly when it comes to encoding them. Different browsers require different codecs.

There is, however, a simple way: Archive.org hosts all kinds of useful content. (The WayBackMachine, which keeps snapshots of how websites looked at a certain time, is probably the best known.) And you can host content there if you license it with Creative Commons. The good news? Archive.org automatically converts your content to HTML5-friendly formats!

Check out the recording of my talk on HTML5 for gaming. I recorded it with Audacity and saved and uploaded it as an MP3. The Ogg version was created by Archive.org. To embed it on a Web page, I just need to do this (line breaks added for readability):

<audio controls>
  <source src="http://www.archive.org/download/
               TheWhyOfHtml5ForGames/
               TheWhyOfHtml5ForGames.ogg">
  <source src="http://www.archive.org/download/
               TheWhyOfHtml5ForGames/
               TheWhyOfHtml5ForGames.mp3">
</audio>

The same goes for video: free, fast hosting without limits, and automatic conversion. What more could you want?

Converting SlideShare To HTML

SlideShare creates embeddable Flash versions of my Keynote files (saved as PDF). I want to go with open technology and convert them back to HTML and images. You can do this with the mobile version of SlideShare.

If you call up a SlideShare presentation on a mobile device, you’ll get an HTML version with JavaScript and images. You can simulate this by sending the user agent of, for example, an iPad to the page before displaying it. In PHP, this takes a few lines of code:

$url = 'http://www.SlideShare.net/cheilmann/
        the-why-of-html5-for-games-development';
$url = preg_replace('/.net\//','.net/mobile/',$url);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0(iPad; U; CPU iPhone OS 3_2
like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko)
Version/4.0.4 Mobile/7B314 Safari/531.21.10");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$page = curl_exec($ch);
curl_close($ch);
echo $page;

Slidesharemobile in Creating And Distributing Presentations On The Web
Large view

I’ve scraped and converted the results, and now I can embed the SlideShare presentation as HTML and images using the converter tool:

Slideshareconverter in Creating And Distributing Presentations On The Web
Large view

I still want to fix a few things, such as making the images preload intelligently and adding proper alternative text. SlideShare creates transcripts of your slides on the page, but if there are slides without images, then the two go out of sync. I’ve emailed the company about it, and a fix might be released soon.

Summary

When it comes to publishing presentations online, a lot can be automated by using the Web as a platform and taking advantage of conversion services. Many developers are working on Web-based presentation tools, and I am quite sure we’ll see a collaborative presentation platform come into existence this year, although the task might not be as easy as it sounds. I have listed the hidden requirements of presentation systems before, and some things still need to be fixed. Keep your eyes open and help the cause.

(al)


© Christian Heilmann for Smashing Magazine, 2011. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: embedding, presentations, slideshows, Tutorials, video

October 20 2010

15:09

Review of Popular Web Font Embedding Services

Smashing-magazine-advertisement in Review of Popular Web Font Embedding ServicesSpacer in Review of Popular Web Font Embedding Services
 in Review of Popular Web Font Embedding Services  in Review of Popular Web Font Embedding Services  in Review of Popular Web Font Embedding Services

In the mid-80s the desktop publishing revolution began with the introduction of the Mac Plus, Aldus PageMaker and the Apple LaserWriter printer. It took quite a few years for these tools to make an impact on the design and publishing world, but once they did, there was no looking back.

In 2010 we see a similar revolution starting to take shape with web fonts. Even though @font-face was introduced in the CSS2 spec in 1998, it wasn’t until this past year that all in-use web browsers added support for it. This year we’re seeing a wave of web font services being marketed, and this could have a profound impact on web typography.

Web font services, like Typekit and now the Google Font API, have captured a lot of attention. But in the past 3 months there’s been an explosion of new services; services like Fonts Live, Fontdeck, Webtype and others with conjugated names involving “Font” or “Type”.

While all of these services are unique, they each provide a tool for web designers and developers to legally display professional fonts on their website. The guide below compares 10 of these services, breaking down the pros and cons of each. We hope this comparison will help you make a more informed decision on which service to use when you venture into the ever-growing, sometimes confusing, world of web fonts.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Typekit

Typekit, Inc. is a popular web font service from Small Batch Inc and founder Jeffrey Veen. Typekit was one of the first services on the scene and is currently one of the most widely adopted services on the market.

Fonts-11 in Review of Popular Web Font Embedding Services

Font Selection
4000 (about half of these are through the Typekit library, and the other half via licensing arrangements with foundries who sell their own web licences)

Advantages Over Other Services
Strong platform integrations. Typekit is a scaled service, with well over 80 million unique users each month.

Pros
Extremely easy setup for designers and developers, allowing integration within minutes. Integration with Google Font API and blogging platforms including WordPress, Posterous and Typepad. The full font library is available via most plans for a single low price, allowing customers to try different fonts on one site as well as use different fonts on multiple projects. Now offering Adobe fonts. Enterprise customers can self-host using their own CDN. The service allows you to host custom fonts. The simple free plan doesn’t expire.

Cons
Implementation requires JavaScript (although on the Typekit blog they list some reasons that JavaScript-based implementation has its advantages). Fonts are not available for desktop use.

Pricing
Free trial account includes the use of 2 fonts on 1 website. Paid plans start at $24.99 per year (2 sites, 5 fonts per site). The more popular plans allow unlimited font usage on unlimited domains.

Fee Schedule
Annual subscription

Our Experience with Typekit

Setting up TypeKit is fairly straightforward. You just set the domains you want to use (the free trial site includes one domain and up to two fonts) and then build your Kit by adding fonts. A little JavaScript inserted into the header pulls in all the necessary CSS information. You can also reference the fonts in your own CSS, and use wild cards when adding to your list of allowed domains (e.g. *.domain.com will work on sub.domain.com).

As is the case with any web font service, there is a brief delay before the proper font is shown, but it’s barely noticeable. Since Typekit’s fonts are loaded via JavaScript, Typekit offers tools to control the loading process, so delays are not as noticeable to the user.

Webtype

Webtype is a recent creation of The Font Bureau, Ascender, DevBridge, and font experts Roger Black and Petr Van Blokland. Webtype is all about quality and boasts “fonts for the highest quality online typography, including typefaces which were designed from scratch specifically for onscreen reading”.

Fonts-12 in Review of Popular Web Font Embedding Services

Font Selection
365

Advantage Over Other Services
Font quality

Pros
Quick and easy setup. Flexible pricing. Ability to host custom fonts as well as self-host. JavaScript-free integration. Desktop license available.

Cons
Some fonts are expensive compared to other web font services.

Pricing
Free 30-day trial on all fonts. Fonts start at $10 per year per site.

Fee Schedule
Annual subscription

Our Experience with Webtype

Webtype was easy to set up and use from the signup process on. Just browse and purchase fonts (a 30-day free trial license is available for testing fonts) and then create projects. Select the font you want to use for each project and you’ll be given a link code and CSS selector for each font. Then you copy and paste them into your HTML and CSS files and you’re ready to go.

Make sure you click “Save” from the CSS resource page that gives you the code, or it won’t be live. Resource size is also given on this page, which can be helpful if you’re trying to estimate bandwidth usage. The load time for the font was possibly a bit slower than some of the other services here, despite the small file size of the font tested.

Fontdeck

Fontdeck is a relatively new service by Clearleft and OmniTI. It was conceived in March 2009 by Jon Tan and Richard Rutter as a way to bring quality fonts to a wide audience while levelling the playing field for type foundries. It went into private beta in January 2010 and was open to the public in June of 2010.

Fonts-13 in Review of Popular Web Font Embedding Services

Font Selection
600, with plans for this number to be doubled before Christmas.

Advantage Over Other Services
Only pay for the fonts you want to use. No bandwidth limit. Unlimited trial periods for all fonts (with a 20 IP address cap).

Pros
Easy to set up. Affordable options available. Automatically include similar style fonts in the font stack. Pure CSS with no JavaScript required.

Cons
No self-hosting option available. Fonts not available for desktop use.

Pricing
Some free fonts, but most start at $2.50 per year per site.

Fee Schedule
Annual subscription (which applies only to fonts on live web sites; as mentioned, all fonts have unlimited trial periods).

Our Experience with Fontdeck

Fontdeck was incredibly easy to set up. While it does require manual insertion of the CSS selectors into the stylesheet for your site (which is by design, to give designers as much control as possible), it provides the code for this immediately without the added step of setting up a stylesheet (the link is ready as soon as you select to add the font). Prior to purchasing the license, the first 20 visitors to your site can see the font.

I did find that I had to add the subdirectory to the hostname in order to get it working. But all the options and controls are located on a single page for each font, making it easy to update settings. Fonts are displayed quickly, but as with the other services, there is a split of a second when you can see the default font.

One added bonus from Fontdeck is that they include similar style fonts in the font stack, in case the user’s browser doesn’t support @font-face, and to help with the perceived change in text. Many of the other services just use the default font or a generic serif/sans-serif.

Fonts Live

Fonts Live is a new web font service from Ascender Corporation — the company behind the “Droid” fonts for Google’s Android mobile platform, the “Segoe” family of fonts for Microsoft Windows, and the Ascender Fonts desktop font web store. Fonts Live is similar to Webtype (both were developed by DevBridge), however, Fonts Live serves fonts exclusively from Ascender and its partners.

Fonts-14 in Review of Popular Web Font Embedding Services

Font Selection
499

Advantage Over Other Services
Font quality

Pros
Flexible pricing. Desktop license available. Option to self-host web fonts. Integration with Google Font API. JavaScript-free integration. Now offering Hallmark fonts.

Cons
Some fonts are expensive compared to other web font services. Back-end was among the least user-friendly of the services featured here.

Pricing
Free 30-day trial on all fonts. Fonts start at $10 per year per site.

Fee Schedule
Annual subscription

Our Experience with Fonts Live

Setting up Fonts Live is a bit more labor intensive than setting up some others featured here. Setting up the service wasn’t without its bugs, either. First of all, read the documentation before you start, or you’re likely to get confused. With the first font I tried (Corsiva Italic), the site was unable to set up the resource and kept returning errors. It also created blank files for each of these failures, meaning I had to go in and manually delete them. Not sure if this was just an exception for that particular font or if it’s a more widespread problem. There was no mention of it in the site’s documentation.

I had better luck with the second font I tried (Romany). This time it created the resource without any issues. From there, you have to insert the stylesheet (“resource” in Fonts Live terms) link in your header and then insert the font family, style, and weight for whichever elements you want styled. The plus side here is that you don’t run into issues with your original stylesheet interfering.

Once it was up and running, however, it was noticeably faster serving the fonts than TypeKit, though this is likely due to smaller file sizes in the fonts used.

TypeFront

TypeFront is a hosting-only service which lets you upload a font you already own, as long as it has a web-friendly license (make sure you read the license agreement carefully!). Once you add the domain(s) you want to use, TypeFront provides you with the code to add to your website.

Fonts-15 in Review of Popular Web Font Embedding Services

Font Selection: N/A

Advantage Over Other Services
Ideal for do-it-yourself designers and developers who understand the ins and outs of web typography.

Pros
Inexpensive. No noticeable delay when displaying web fonts.

Cons
You must supply your own fonts. Requires a solid understanding of your font license agreement.

Pricing
Free plan offers 1 font and 500 requests per day. Paid plans start at $5 per month (Australian dollars) and include 10 hosted fonts and 5000 requests per day. 30-day trial on all paid plans.

Fee Schedule
Monthly subscription

Our Experience with TypeFront

Once you’ve signed up for an account, uploading fonts is simple. Just make sure the fonts you’re using have a web-friendly license. From this point you have to enable the format you’d like to use for the font (included are EOT, OpenType, SVG, TrueType, and WOFF — at least for the font I used). Once one of those formats is enabled, you have to add domains.

After you’ve enabled your formats and set up the domains you want to use, you have to copy the @font-face code into your CSS files and add the font to your font stacks. The big advantage TypeFront has over the other services listed here is that there is no noticeable delay before the correct font is displayed.

Fontspring

Fontspring offers downloadable fonts for self-hosting. Unlike a hosted service, Fontspring provides downloadable font files and sample code to host web fonts on your own.

Fonts-16 in Review of Popular Web Font Embedding Services

Font Selection
1,937 families

Advantage Over Other Services
No recurring subscription fee

Pros
Large font selection. No recurring fees or bandwidth restrictions. Desktop license included.

Cons
Font quality varies. Self-hosting only, which requires additional setup and technical skills.

Pricing
Free or up to several hundred dollars depending on the font family

Fee Schedule
One-time fee

Our Experience with Fontspring

Because these are self-hosted files, it’s a bit harder to get everything set up properly than it is with the other services here. When you purchase and download a font that includes an @font-face license, the download package includes all the files you’ll need for web implementation, including the various font file formats like EOT and WOFF.

I found it easier to just copy and paste the stylesheet information included into the existing site’s stylesheet. Once that’s done, you need to make sure your fonts are loaded into the same folder as your stylesheet (or change the URL information in the CSS). Add the font to your font stack and you’re ready to go.

The speed at which the fonts loaded was roughly the same as for most of the other services here. The advantage to using this service is that you own a permanent license to the fonts, without any recurring annual fees and with no restrictions on bandwidth or traffic.

Fonts.com Web Fonts

Web fonts from Fonts.com is a new venture from Monotype Imaging, the largest font distributor on the web. Fonts.com currently has, by far, the largest web font selection with more than 7,500 fonts.

Fonts-17 in Review of Popular Web Font Embedding Services

Font Selection
7,500+

Advantage Over Other Services
Large Font selection

Pros
Currently the largest selection of fonts on the web. Exclusive home to popular fonts like Helvetica, Frutiger and Univers. Support for more than 40 languages. Use on unlimited domains. Download up to 50 desktop fonts per month with the Professional plan. JavaScript-free integration available to Standard and Professional subscribers.

Cons
Relatively expensive on a price-per-font basis when using a limited number of web fonts. The font selection interface is slower than average.

Pricing
Various tiers ranging from free up to $500/month. With a free tier, you have the ability to use any of 2000 fonts on an unlimited number of websites (up to 25,000 page views). Standard and Pro tiers will give you access to any of over 7,000 fonts. All pricing is dependent upon page views.

Fee Schedule
30 days

Our Experience with Fonts.com Web Fonts

The service looks pretty straightforward. You set up a project with as many domains as you want and then select the fonts you want to use for that project. Selecting fonts is a bit slow (it takes 30 seconds or more for a font to actually be added to a project), but not enough to be prohibitive. There’s a huge selection of fonts and powerful tools for sorting through them, in addition to search capability.

From there, you have to enter each CSS selector for which you would like to use a web font and select the font used for that particular selector using a drop down menu that lists the fonts you already selected for the project. One place where Fonts.com really stands out is in the options you have for publishing your new web fonts. There are two different JavaScript options — an “Easy” option and an “Advanced” one — that let you add the fonts to selectors directly in your stylesheet rather than just through the web interface, as well as two non-JS options (also “Easy” and “Advanced”).

Again, the Fonts.com site was a bit slow overall but the end result is just as fast and seamless as any other service listed here.

Google Fonts

Google Fonts, announced last May, represents Google’s foray into web fonts. Google offers the service free of charge. Although the selection is currently limited to certain public domain fonts, it has the potential to have a significant impact on the future of web fonts.

Fonts-18 in Review of Popular Web Font Embedding Services

Font Selection
60 (including international fonts)

Advantage Over Other Services
Free

Pros
Easy to implement. Fast font loading. Google’s WebFont Loader lets you use their service with multiple web font providers.

Cons
Small font selection in the Google font directory. No support for iPhone or iPad (Mobile Safari).

Pricing
Free

Fee Schedule
N/A

Our Experience with Google Fonts

The Google Fonts API is probably the easiest of the services listed here to get started with, mostly because there is no sign-up process. You simply browse the fonts they offer, select one, and then get the code. Link the stylesheet in your website’s head, and then add the font to the font stack in your stylesheet.

The service is very fast, with only a barely noticeable lag before loading the proper font. The fact that there are no limits on usage of the service puts it among the top contenders on this list. The only major drawback is the limited number of fonts available.

Kernest

Kernest is a hosted or self-hosted (you can also use Fontue, Kernest’s open source web font serving engine) web font tool that converts fonts into web font ready formats and sample code.

Fonts-19 in Review of Popular Web Font Embedding Services

Font Selection
2,450

Advantage Over Other Services
Most fonts are free

Pros
Open source web font serving engine. Large font selection.

Cons
Self-hosting only, which requires additional setup and technical skills

Pricing
Free or up to $15

Fee Schedule
One-time fee

Our Experience with Kernest

Kernest has a great selection of free and paid fonts available. Free fonts could be set up without having to sign up for an account. Just find the font you want to use, make sure the permissions are acceptable for your intended use (not every font is allowed to be used on commercial sites, for example), and then copy and paste the link and CSS code into your files.

Kernest works as well as any of the others on this site, with minimal lag time before the fonts load.

Typotheque

Typotheque is a graphic design studio and type foundry located in the Netherlands. Their hosted web font service includes a relatively small selection of Typotheque fonts. Typotheque was the first foundry to start its own web font service, and all fonts are designed in-house.

Fonts-20 in Review of Popular Web Font Embedding Services

Font Selection
32 font families, many supporting various styles and languages; this means there are over 500 single fonts.

Advantage Over Other Services
Use on unlimited websites

Pros
Option to purchase a full (web and desktop) license. Over 250 languages supported, and from those up to 5 languages can be embedded. All fonts are exclusive to and designed by Typotheque. Offers self-hosting for large websites.

Cons
Limited font selection (although this is only true because their fonts are exclusive) and monthly bandwidth (500MB for each font within a font family).

Pricing
20% of the full desktop license (ex. Fedra Sans Std Book: Full @ €90, Web @ €18).  Includes 500MB monthly bandwidth.

Fee Schedule
One-time fee (€5 for every extra GB over 500MB)

Our Experience with Typotheque

Setup is similar to the other services listed here. Just select the font you want to use and the domains on which it will be used, add the stylesheet link to the head of your page, add the font to your font stacks, and you’re ready to go. Lag time for the font to load is comparable to the other services. The biggest drawback is the lack of font selection, but as mentioned, this is due to the fact that their fonts are exclusive to Typotheque.

The service did return an error when generating the font subset, but it appeared to work fine, so not sure if that’s a bug or if there would actually be problems with more extensive testing.

WebINK

WebINK is a hosted web font platform developed by Extensis, a software development company based out of Portland, Oregon and specializing in font management.

Fonts-21 in Review of Popular Web Font Embedding Services

Font Selection:
2,000

Advantage Over Other Services
Can be affordable for the right type of user

Pros
Affordable pricing structure (similar to Typekit). Decent selection of fonts. Offers access through a desktop application called Suitcase Fusion 3 (Mac and Windows). This application has a live website preview mode for testing different fonts, and something called QuickMatch that finds the closest match to the chosen font on your computer.

Cons
Confusing interface and back-end. Each plan is limited to 4 websites (Note: Each user can set up as many “Type Drawers” as they want, allowing 4 websites per Type Drawer; so really the number of websites is only limited to an individual plan within a single user account, whereas the number of Type Drawers is unlimited).

Pricing
Free 30-day trial on all fonts. Packages start at $0.99 per month (only includes “Promotional” font selection) for 1GB usage and up to 4 websites.

Fee Schedule
Monthly subscription

Our Experience with WebINK

The WebINK interface is probably more confusing than the others listed here. The service allows you to create an unlimited amount of Type Drawers to hold the fonts for your different projects. To add fonts from the library into your Type Drawers, you need to click the “add fonts” button within a specific Drawer. Going directly to the font library will not allow you to have direct access to your Drawers, so this takes some getting used to.

Once you get the fonts you want into your Type Drawer, setting them up on your website requires adding the @font-face information to your stylesheet and placing the fonts into your font stacks. The speed at which the font loads on the site is about the same as any other service.

Font-Face

Font-Face recently scrapped its project after the recent Google Font announcement. However, according to their website, they are “hatching a new plan” so we may hear more from them yet.

Fonts-22 in Review of Popular Web Font Embedding Services

How to Choose a Service

There is no “right” answer when it comes to choosing a web font service. Selecting the proper service usually depends on what you or your client need. You could ask yourself the following questions to help assess your needs:

  • How important is font selection? Are there specific fonts you need?
  • How important is font quality to you and your clients?
  • Do you require a self-hosting option?
  • Do you or your client have a budget? What type of fee structure would be ideal?
  • Is iPhone and iPad (Mobile Safari) support important?

Based on your answers to these questions you should be able to use the quick comparison chart below, along with the more detailed information above, to make an informed decision, or at the very least find a few starting points to start digging deeper (also be sure to check out the great chart @font-face face off).

Fonts-23 in Review of Popular Web Font Embedding Services

Quick Overview

Here is a short overview of the services reviewed in this article, including the number of fonts in each, advantages over other services, price and fee schedule.

ServiceFontsAdvantage Over Other ServicesPriceFee ScheduleTypekit4000IntegrationsPlans start at $24.99AnnualWebtype365Font qualityFonts start at $10AnnualFontdeck600Pay-per-useFree / $2.50 and upAnnualFonts Live499Font qualityFonts start at $10AnnualTypeFrontN/ADo-it-yourselfPlans start at $5MonthlyFontspring1,937 familiesNo recurring feeFree to $100sOne-timeFonts.com7,500+Font selectionFree or up to $50030 daysGoogle Fonts60Easy to implementFreeN/AKernest2,450Most fonts freeFree or up to $15One-timeTypotheque32 familiesUnlimited websites20% of desktop licenseOne-timeWebINK2,000AffordablePlans start at $0.99Monthly

Summary

Web font services, like any relatively new popular technology, are complex and rapidly proliferating.  While there is no “perfect” service, it’s promising to see such a wide variety of companies entering the industry and continually raising the bar for web fonts. I hope this breakdown helps you get a better handle on what’s available. If you’ve had your own experience using a web font service, please let us know in the comments.

Related Resources

Disclosure: This article was co-written by Andrew Follett and Cameron Chapman. Andrew has provided consulting services for Ascender Corporation. Impressions were written exclusively by Cameron. All facts were checked and updated by Louis Lazaris.


© Andrew Follett for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: embedding, font-face, fontdeck, Fonts, services, typekit, typography

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...