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

September 05 2012

07:08

Sosa – 121 Icons in One Free Webfont


  

Ed Merritt, Designer from Bournemouth, took a pragmatic approach. Sosa is a tailored icon font, which carries all the symbols he needed most frequently in his daily development work. As Ed is a designer, just as probably most of you are, it doesn’t seem far-fetched to expect, what Ed needs most might be identical to what you need most, too. Since Sosa is free for both personal and commercial projects, why not take a closer look?

Sosa: Icon font without a specific use case

If you know common icon sets, Sosa might surprise you. Despite the relatively small amount of just 120 symbols, the set is able to cover a variety of potential use cases. You’ll find device-icons as well as brand-icons, icons for user interfaces and more. Even weather-symbols and currency-icons are provided.

With only 95k, the download is rather lean and contains the icons in the formats TTF, EOT, WOFF and SVG. Sosa has to be integrated in your own website via @font-face. Merritt didn’t deliver the necessary related files, which shouldn’t impose a major problem to the average designer. Sosa’s project website has an overview of which key on your keyboard produces which icon.

Sosa: Contents of the downloaded archive

Even though Sosa is offered free of charge, its developer is always happy to accept donations via PayPal as to keep up font-development. There are no restrictions regarding how to use the icon font. Of course you’re not allowed to offer the set as a download from third-party domains or imply that you’re its developer. Backlinks are always appreciated, but not presupposed for the use of the product.

March 05 2012

08:00
Sponsored post
feedback2020-admin
14:56

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

June 21 2010

07:00

Easy Custom Web Typography with Google Fonts API

The world of web typography is advancing with leaps and bounds. Already we have the options of SiFR, Cufon, Typekit, @font-face and now, Google has introduced their own custom font service under the Google Font API. Let’s take a look at what the Google Font API is and how you can use it in your own web designs.

View the Google Font API demo

View the Google Font API demo

How it works

The Google Font API is basically a shortcut to manually using the CSS3 @font-face property. When you insert the Google code in your website, the Font API returns a stylesheet including an @font-face rule for your chosen font, it might look a little like this:

@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: normal;
  src: local('Reenie Beanie'), url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0') format('truetype');
}

The difference is, Google will do all the hard work in getting the font to work in non-CSS3 browsers such as Internet Explorer.

Advantages

The Google Font API is one of the most easy to use custom web font solutions out there. With just a line of code you’re ready to import a range of custom fonts from the Google Font Direcory.

The Google Font API works like a charm in most browsers.

The Google Font Directory includes a range of tasteful and stylish fonts to choose from, as well as a selection of more decorative options.

All fonts are released under an Open Source license, so the Google Font API can be used in both your commercial and personal projects.

Text rendered using the Google Font API is still selectable, which is one drawback with some solutions like SiFR.

The Google Font API doesn’t rely on Javascript, so the customised fonts still show if the user has Javascript disabled.

Because the fonts are rendered with good old CSS, any additional styling such as the CSS3 text-shadow property can be added.

Disadvantages

Despite having a few nice options in the Font Directory, the choice is fairly limited. However you can tie the Google Font API with Typekit using Javascript and the WebFont loader to open up further font options.

Most browsers will load the rest of the page before rendering the font. This may leave a blank space, or the fallback option until the page has been completely downloaded.

It’s not supported on mobile browsers such as the iPhone, iPod or iPad webkit browser or Android.

Enough blabber, how do I use this thing?!

Google Font API directory

Head over to the Google Font Directory to browse the catalog and pick out the font of your desire. I’m going to use the IM Fell DW Pica SC variant of IM Fell and Reenie Beanie.

Google Font API code for IM Fell

Click the Get the code tab and copy the CSS stylesheet link.

<title>Custom Fonts using Google Fonts API</title>

<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC' rel='stylesheet' type='text/css'>

</head>

Paste the code in the head of your web page.

h2 {
	font-family: "IM Fell DW Pica SC", Georgia, Serif;
}

In your own CSS stylesheet, add the name of the font as specified by Google to your font stack in quotation marks. Follow this up with backup options.

View the Google Font API demo

Render your web page and see your custom web typography in all its glory!

View the Google Font API demo

May 03 2010

07:00

Spice Up Your Web Typography with @Font-Face

We’re all used to making the most of the plain old web font stacks that have been around for the past 10+ years, everyone who’s designed a website will have no doubt written out Helvetica or Georgia hundreds of times in their stylesheets. Nowadays however, we have the option of embedding a whole new range of fonts into our designs. Let’s look at how the CSS @font-face rule allows us to get fancy with out future website projects.

View the demo

View the demo

The @font-face is commonly referred to as a new CSS3 feature, but has actually been around for some years. The only problem was there weren’t any browsers to support it (apart from IE’s obscure EOT methods), so it sat collecting dust at the back of the CSS2 specification. Recently however, browsers have started implementing support for the @font-face rule. First came Safari (3.1), then Firefox (3.5), Opera (10) and Chrome (4.0). So now, any @font-face implementation will be available for a large chunk of your visitors. What’s more, if you insist on IE support you can even get everything working with a quick fumble around with Microsoft’s WEFT tool.

What about SiFR, Cufon, Typekit, [insert latest web-font solution here]?

Over recent years there have been amazing advances in web typography, with various solutions making use of Flash or Javascript to render unique fonts on web pages. I’ve heard great things about all these resources, so definitely check them out if they better suit the needs of your project. A couple of advantages include even larger font choices and wider browser support. I personally enjoy implementing @font-face simply because it fits right in as a native CSS declaration. It doesn’t rely on any weighty add-ons, or any messing around to get it working. Just a few extra lines of CSS and you’ll be rocking with your fancy font choices in no time.

How to use @font-face

To implement @font-face in your own website design, just add the following rule to your CSS stylesheet.

@font-face {
font-family: Blackout;
src: url("path-to-file/blackout.ttf") format("truetype");
}

This snippet of code sets up the font-face rule. In plain english it says whenever the word Blackout appears as a font-family option, use this file. The file source is then listed, and specified as either Opentype or Truetype, depending on the nature of the font file.

h1 { font-family: Blackout, Impact, Helvetica, Sans-Serif; }

All you need to do then is reference the font Blackout in your everyday font-stacks. Remember to add more universal backup options for those users with non-supporting browsers.

Fonts available for @font-face use

Don’t go font-facing every font you have on your computer, as the majority of font files aren’t licensed for you to go making them publicly available for download (which is basically what you’re doing with @font-face). As time goes on there’s more and more fonts becoming available for font-face use, and they’re pretty cool ones too! Here’s a roundup of the most popular fonts available for your font-face use. For even more, check out the Fonts available for @font-face embedding list at Webfonts.info.

Blackout

Download the font

CA BND

Download the font

Chunk

Download the font

Delicious

Download the font

Diavlo

Download the font

Fontin

Download the font

Graublau Sans

Download the font

Junction

Download the font

MEgalopolis

Download the font

Tallys

Download the font

Sniglet

Download the font

View the demo

View the demo

April 23 2010

15:28

Quick Tip: Ever Thought About Using @Font-face for Icons?

The evolution of Internet technologies never ceases to amaze. Seemingly daily, new concepts and techniques are being thought up by creative and talented people. With modern browsers being adopted at a greater rate, systems like CSS3 are becoming more and more viable for use on projects of all sizes. Clearly, this can be seen by looking at new services sprouting on-line like TypeKit. Conceptually, if we deconstruct a font down to it’s basic elements, we can make use of this technology for things other than type, icons.


The Need for Speed

For a short period of time, developers began producing websites with little regard for bandwidth consumption. HTML and CSS where restrictive and Adobe Flash was an open canvas for designers and developers to stuff animations and complex layouts into. This resulted in some extremely bandwidth heavy sites—we all remember a few. Those were the days before the proliferation of mobile smart phones.

With smart phones accessing the Internet more frequently, bandwidth and page load speeds have suddenly returned to the forefront. Thankfully, advances in HTML, CSS, and JavaScript have made that all possible. Central to webpage speed and responsiveness is the number of HTTP requests a page load must make. Modern browsers limit the number of requests to a single server. The W3C HTTP 1.1 specification reads

“A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion.”

One technique that has become increasingly popular is the use of CSS sprites. CSS sprites are designed to reduce the number of HTTP requests to the web server by combining many smaller images into a single larger image and defining a block level CSS element to only show a defined portion of the larger image. The technique is simple, but ingenious.


Deconstructing the Font

Fonts at their most basic molecular level are a series of vector glyphs packaged up into a single “glyph archive”.

CSS3 has introduced to the web development world the ability to embed fonts with the @face-face declaration. Without question, this advancement in Internet technologies is one of the most exciting and important stages in our brief history. With developers able to embed fonts of their choice, designers can produce layouts that will render far more consistently from platform to platform bringing the art of interactive layout closer to it’s print cousin.

If we take a closer look at the technology behind a font, we can gain a far better understanding of how they can be used and deployed. Fonts at their most basic molecular level are a series of vector glyphs packaged up into a single “glyph archive”. We can then reference each glyph by its corresponding character code. Theoretically, it’s very similar to the way in which we reference an array in almost any programming language—through a key/value pair.

With this in mind, the glyphs we reference can really be any vector-based single color image. This is nothing new—we’ve all seen Dingbats and Webdings. They are two examples of non-type fonts, that is, a series of vector based images compiled into a single font archive.


Abstracting and Expanding @font-face

With the advent of font embedding and the realization that fonts are essentially a series of simple vector glyphs, I began to experiment on how to use this format to my advantage. Conceptually, if I placed all required icons for a particular site into a custom font, I would then be able to use those icons anywhere on the site with the ability to change size and color, add backgrounds, shadows and rotation, and just about anything else CSS will allow for text. The added advantage being a single CSS sprite-like HTTP request.

To illustrate, I’ve compiled a new font with a few of the great icons from Brightmix.

Sample glyph chart

I’ve used the lower case slots for plain icons, and the uppercase slots for the same icon in a circular treatment.

To use my new Icon Pack, I’ll first have to export my font set as a number of different font files (.eot, .woff, .ttf, .svg) to be compatible with all browsers. The topic of font embedding and file format converting is covered elsewhere, so I will avoid a detailed explanation here. However, the CSS would look something like this.


@font-face {
  font-family: 'IconPack';
  src: url('iconpack.eot');
  src: local('IconPack'),
    url('iconpack.woff') format('woff'),
    url('iconpack.ttf') format('truetype'),
    url('iconpack.svg#IconPack') format('svg');
}

Once embedded, I now have a complete icon set in vector format to reference. To reference an icon I simply need a style that includes the font-family of “IconPack”.


<style>
.staricon {
  font-family: 'IconPack';
}
</style>

<div class="staricon">a</div>

The above example would render a star and is the most basic use of the Icon Pack concept, however it’s not very intuative from a development perspective, not SEO friendly, nor does it gracefully degrade in the case of non-CSS support.

To remedy the situation, I’m going to include a :before pseudo-element and wrap the content in a span tag.


<style>
.staricon {
  font-family: 'IconPack';
}
.staricon:before {
  content: 'a';
}
.show {
  display:block;
}
.hide {
  display:none;
}
</style>

<div class="staricon">
  <span class="show">star</span>
</div>

Now, the star is added to the display and I can toggle the visiblility of the text by using the show and hide classes. The result is an easy to reference CSS class that degrades gracefully and is optimized for search engines. For my entire set of icons, I can write something like below.


<style>
.show {
  display:block;
}
.hide {
  display:none;
}
.icon {
  font-family: 'IconPack';
}
.star:before {
  content: 'a';
}
.rss:before {
  content: 'b';
}
.screen:before {
  content: 'c';
}
.talkbubble:before {
  content: 'd';
}
<!--
... and so on ...
-->
</style>

<div class="icon screen">
  <span class="hide">screen icon</span>
</div>

Icon Pack Usage

The benefit here is that the icon will scale with the font size. In fact, all icons will scale and maintain perfect clarity.

So far, we’ve only touched the tip of the iceberg, nothing groundbreaking here, although you may start to see the possibilities. A real world scenerio would be the replacement of the list-item-style. As apposed to using an image, we can now use a vector icon from our Icon Pack. The benefit here is that the icon will scale with the font size. In fact, all icons will scale and maintain perfect clarity.

Since the icons are now placed on our page as if they were text, we can apply any valid CSS style to them without downloading any other assets. We could apply color, font-size, text-shadow, etc and make use of the :hover pseudo-element for mouse over effects—all with a single glyph.

As with anything, there are some unfortunate limitations. As of this writing, there is no way to display a single glyph with multiple colors. There has been some CSS trickery to get gradients over live text, however complex shapes with varying colors in a single glyph is a limitation. Having said that, there are ways to approximate multi-colored glyphs by segragating the parts of a vector graphic into individual glyphs then assembling and coloring them on the page through CSS.

Another interesting usage is a simple CAPTCHA validation. By replacing the glyphs for the alphabet with numbers, users will see numbers, but the page code will be letters. Some simple computation to translate between the two, and you have an easy to read CAPTCHA.

To better illustrate these concepts, I’ve assembled a sample page made up of two HTTP requests—the page code and a single Icon Pack. Included as well is the ability to scale the font size of the page to clearly demonstrate the flexibility of embedding vector glyphs. The company logo, navigation, imagery, and CAPTCHA are all using glyphs. Please note, the CAPTCHA included here is for illustration only. To use this on a production site, I would recommend validating on the server side with a dynamic algorithm as apposed to JavaScript.

This sample page also demostrates the use of a glyph as a scalable “repeating” background. I’ll be the first to admit this implementation is hack-ish at best, however I think it demonstrates the flexibility and versatility of the Icon Pack.

Clearly, this opens up some possiblities. Designers can develop Icon Packs for sale, corporate entities can host a single Icon Pack to be used on all corporate media. Template designers can easily distribute multiple color options of the same template all without having to save and export a single extra file. Web designers can easily scale existing sites to be compatible with hand held devices. Furthermore, this technique exposes our icons to the DOM enabling animated Flash-like effects with your favourite JavaScript API.

As usage and browser support for CSS3 penetrates further, Icon Packs will soon have a large impact on content delivery furthering the light weight, scalable, multi-device trends that are starting to become a necessity.


February 09 2010

20:24

Quick Tip: How to Work with @Font-face

Due to the fact that @font-face can be a bit overly complicated, it hasn’t caught on quite as much as it should. Once you start reading about licensing, different font formats, browser consistencies, it can potentially become more trouble than it’s worth.

But – in five minutes, I’ll try to simplify the process of working with custom fonts as much as I possibly can. Services like Font Squirrel help to make the task a cinch!


Final CSS

@font-face {
font-family: 'blok-regular';
src: url('type/Blokletters-Potlood.eot');
src: local('Blokletters Potlood Potlood'),
 local('Blokletters-Potlood'),
 url('type/Blokletters-Potlood.ttf') format('truetype');
}

@font-face {
font-family: 'blok-italic';
src: url('type/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
 local('Blokletters-Balpen'),
 url('type/Blokletters-Balpen.ttf') format('truetype');
}

@font-face {
font-family: 'blok-heavy';
src: url('type/Blokletters-Viltstift.eot');
src: local('Blokletters Viltstift Viltstift'),
 local('Blokletters-Viltstift'),
 url('type/Blokletters-Viltstift.ttf') format('truetype');
}

h1 { font-family: blok-heavy, helvetica, arial; }

Notice how we’re referencing both an .eot and .ttf font? This is because, of course, Internet Explorer only uses its own format, that has yet to truly catch on. As such, we must first import that .eot file, and then move on to the different formats for Firefox, Safari, etc. It’s essential that you load the .eot version first.

Next, we search for the font on the user’s computer by using the “local” attribute. If it’s unfound, only then do we pass a url that will load the font.

Why Doesn’t IE Try to Load the TTF Fonts?

This was definitely a concern. If Explorer can’t work with the truetype format, we don’t want to waste time trying to download the font. Luckily, because of all those local attributes, and the commas, IE won’t understand any of it. As such, it will simply skip the line all together, thus, only utilizing the .eot version.

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 ...