Comments on: DIY Webdings – CSS Sprites using @font-face

By: @font-face with .otf causing warning in safari - SitePoint Forums

@font-face with .otf causing warning in safari - SitePoint Forums — Thu, 09 Jun 2011 10:16:12 +0000

[...] Hi, I see that the message prompt in Safari is mentioned in this article. [...]

By: The “24″ Clock on ALARMd

The “24″ Clock on ALARMd — Sun, 24 Jan 2010 07:37:59 +0000

[...] Subscribe Follow Tournology Skip to content AboutAbout Zach LeathermanProjects « DIY Webdings – CSS Sprites using @font-face [...]

By: Zach Leatherman

Zach Leatherman — Tue, 05 Jan 2010 17:43:56 +0000

Ethan, thanks! Love the ClickBits font, and thanks for the FontForge idea, I hadn’t tried that program before. Any plans to release the font-face kit generator source? :)

By: Paul Irish

Paul Irish — Tue, 05 Jan 2010 14:40:03 +0000

Luke, yah @font-face works fine with data uri’s in FF/Saf/Chrome/Opera. I havent managed to get MHTML fonts working in IE. Mobile Safari currently only supports @font-face with an SVG font… and.. side note: there is no known way to do an svg font with data-uri.
SVG fonts are most easily constructed with font squirrel’s generator but using Batik directly works too.

By: Ethan Dunham

Ethan Dunham — Tue, 05 Jan 2010 14:14:40 +0000

@Zach-

Awesome idea! This is something that should really catch on. Using FontStruct to create arrows was inspired. If you were patient enough (and didn’t want to buy a font design app) you could probably dump EPS files from Illustrator into FontForge and generate fonts that way. Hey I just came up with my next big idea :-) The Dingbat Generator. Hah.

Anyway, there are some nice icon fonts that would work well with this idea… I know because I created some of them and licensed ‘em for @font-face. http://www.fonthead.com/fonts/ClickBits

By: Zach Leatherman

Zach Leatherman — Tue, 05 Jan 2010 03:47:05 +0000

Looks like mobile Safari doesn't support @font-face. If you look at FontSquirrel's Kit Generator, it also includes an SVG font option for working with the iPhone, which I didn't include as part of this demo. FontSquirrel also includes a separate stylesheet as a part of their kit that uses data URIs. Steve Souders has some thoughts on @font-face and data uri's.

By: Luke Smith

Luke Smith — Tue, 05 Jan 2010 02:59:08 +0000

I’m not seeing the custom font on mobile safari. Also, have you (or @Paul) experimented with @font-face + data URIs?

By: Zach Leatherman

Zach Leatherman — Mon, 04 Jan 2010 17:28:51 +0000

It was certainly the easiest tool to use for a quick demo. I found it to be pretty intuitive, though probably not something a power user would dive into since they limit you to their stock building blocks to create “pixels.”

If you find a good utility to make fonts, let me know!

By: Ron

Ron — Mon, 04 Jan 2010 17:07:55 +0000

So you rebuilt the icons using FontStruct? I wonder if their is a better tool for this sort of thing.

By: Zach Leatherman

Zach Leatherman — Mon, 04 Jan 2010 16:45:57 +0000

Great, thanks Paul!

By: Paul Irish

Paul Irish — Mon, 04 Jan 2010 15:25:32 +0000

The "When exactly do browsers download the font file?" section on my FOUT post has details about browsers being smart enough to NOT download a file if they don't have to. Summary: all are smart except for IE. (Surprise!!!)

By: Zach Leatherman

Zach Leatherman — Mon, 04 Jan 2010 13:50:59 +0000

Hey Paul,
I would be surprised if anyone wanted to use the abomination of ugliness that is Webdings, even if it had glyphs to represent what you needed. It’s been out cross-platform for quite awhile, and hasn’t caught on — I’d say its time has passed.

Are web browsers smart enough not to request the .eot/.ttf file if it isn’t used on the page? I’d be surprised if that was the case.

By: Zach Leatherman

Zach Leatherman — Mon, 04 Jan 2010 13:46:11 +0000

Hey Dan,
Licensing for fonts hasn’t really changed at all with @font-face, if you want to use a custom font you’ll have to make sure it’s an open license. Check out http://www.fontsquirrel.com/ for some nice fonts.

By: Paul Irish

Paul Irish — Mon, 04 Jan 2010 13:23:24 +0000

I was about to say it’d be interesting to use Webdings in the same font-stack so you can use the native font (and save an http connection) if its there.

.dingbat { font-family: webdings, 'jQueryUISubpixelRegular' }

To do that:
1) your font would have to use all the same glyphs as webdings for the various dingbats
2) webdings would have to carry most/all of the gylphs that you want

Sadly 2) isn’t true so the idea is mostly moot.

But aside from that, this is a great exploration. Alongside people using it for flourished dropcaps and we’re starting to see the clever use cases of @font-face.

By: Dan Leatherman

Dan Leatherman — Mon, 04 Jan 2010 03:12:43 +0000

How does this affect licensing with different type faces?