The Future of Fonts on the Web

Posted: Mon Feb 01, 2010 9:01 pm

Well we still may be a ways off from a cross browser font solution, but there is hope for the future, and some options for today if your willing to do some work. The major browser platforms have yet to agree upon a standard format, but here's some previews of what can be done Smile

If your using Chrome, Firefox, Opera, or Safari; checkout this demo.

10 Great Free Fonts for @font-face embedding

Only registered users can see links on this board! Get registered or login!

Relatively fast loading, especially when you consider 10 custom fonts are used.. Another big problem with fonts has been licensing, but there are now fonts available under a variety of redistributable licenses.

Fonts available for @font-face embedding

Only registered users can see links on this board! Get registered or login!

Internet Explorer has decided to go their own direction, Embedded OpenType (EOT) which does have some advantages.

www.webfonts.info wrote:

EOT offers several advantages for type designers, and web designers. For type designers EOT creation tools must respect the embedding permissions built-into their fonts, and EOTs are bound to a specific web page or site. For web designers an EOT can contain a subset of the glyphs, and it can be compressed – both of these features can shrink EOT file sizes to reduce download times and improve performance.

IE has applied to the W3C, and if it's accepted you can expect all the gecko based browsers to pickup support for EOT. More good news, there are free fonts and resources for the EOT format:

Make an EOT file!

Only registered users can see links on this board! Get registered or login!

Until there is an accepted cross-browser format, I'll probably only dabble with this stuff, but if you just can't wait.... have fun Smile

Got you curious about using custom fonts on your site? Checkout Fonts and the Web for more basic info Smile

Only registered users can see links on this board! Get registered or login!

Posted: Tue Feb 02, 2010 1:50 am

Thanks for this, very interesting post as I would agree that existing 'web friendly' fonts are minimal at best, illegible at worst.
I will try and visit all the links you have posted as I would be interested in what happens as far as degradation is concerned i.e. if you specify and use @font-face how does IE handle it, if at all. Would it just degrade to Arial/Helvetica/some other font or just not display the text at all.

Posted: Tue Feb 02, 2010 9:54 am

well I previewed the first demo above in IE and it left the text unstyled, although I didn't dig too deep to see exactly what was going on... I imagine there is a way to do conditional style for IE and load the EOT. Not real familiar with EOT's or microsofts Only registered users can see links on this board! Get registered or login! tool yet, but something tells me it would be challenging to find a font that displays in both formats (just a guess). Probably would be a case of finding two different fonts you liked, one for IE and one for the rest... until one format gets accepted by the other...

Posted: Tue Feb 02, 2010 11:22 am

Being a dialup user I have mixed feelings on the topic of embedded anything. Fonts media ect.. But I'd expect there to be some basic set of fonts available and with luck browser settings to allow or deny installation of embedded fonts. Well I can dream heh?

Posted: Tue Feb 02, 2010 11:52 am

I live in a remote area and if it wasn't for ISDN I would be a dialup user as well; so I hear where your coming from. My connection is limited too, at 128kb. I guess it's up to designers to be responsible and not go overboard with multiple fonts. I checked out one of the .otf files out of curiosity and it was 57kb... not too bad. I'm sure there will eventually be browser options for handling fonts once some format is globally accepted.

never really used @font-face so checked that out too... pretty easy, you declare the font family, read somewhere that some browsers wont support external embedded fonts so keep it as a local file...

Code:

@font-face {


    font-family: Kaffeesatz;


   src: url(fonts/YanoneKaffeesatz-Regular.otf) format("opentype");


   font-weight:bold;


   


}

then you just declare it the same way you would normally, so you have a fall back order..

Code:

.Kaffeesatz {


   


    font-family:Kaffeesatz,Verdana, Arial, Helvetica, sans-serif;


   font-size:40px;


   font-weight:200;


   text-shadow: #FFF 3px 3px 0px; 


   -webkit-transition-property: opacity, text-shadow, color;


   -webkit-transition-duration: 2s, 2s, 2s; 


   color:#999;


   margin:0;


   padding:10px;


}

Haven't tried the EOT yet Rolling Eyes

If your using Chrome, Firefox, Opera, or Safari; Here's a quicky preview of the Kaffeesatz font by Only registered users can see links on this board! Get registered or login! in the Sand_Journey theme on my testing site:

http://www.rtsforce.com/

I'm sure the font sizes I used in this demo would not render very well in IE, or the other font-families, but hey it's a test site Smile

registered · Site Admin Joined: Jun 04, 2004 Posts: 6437

"The Internet will never need more than 10 fonts." -- Al Gore, creator of the Internet's environmentally-correct alter ego: the World Wide Web

Seriously, spasticdonkey, this is really interesting! Thank you for the effort you put in posting this article. I look forward to similarly well-written stuff from you in the future.

Posted: Wed Feb 03, 2010 10:38 pm

thanks, I don't have a coding site so I just come here daily Smile

btw my Only registered users can see links on this board! Get registered or login! has been down due to working of RN related stuff. But it's back for the night and will be up and down the next few days. Works for all except IE... not an example of an accessible font, just for fun and done quickly.... Rolling Eyes

Posted: Wed Feb 03, 2010 10:57 pm

That's really nice! Keep up the good work...

Posted: Fri Feb 05, 2010 3:43 pm

I guess I should touch on one last format, brand new and only supported by firefox 3.6.
It is also considered "a strong favorite" for W3C inclusion.
WOFF
Web Open Font Format

If you have firefox3.6+ here's the demo

http://www.edenspiekermann.com/woff/

Using WOFF is pretty easy, and this css example supposedly works in IE8*, with EOT being the only font format it supports for @font-face. FF3.6 will load the WOFF font, and the last URL being for non supporting WOFF browsers (not IE)

Code:

@font-face {


  font-family: GentiumTest;


  src: url(fonts/GenR102.eot);


}


@font-face {


  font-family: GentiumTest;


  src: url(fonts/GenR102.woff) format("woff"),


       url(fonts/GenR102.ttf) format("truetype");


}


 


body {


  font-family: GentiumTest, Times, Times New Roman, serif;


}

* Kind of works in IE, read this if your interested. IE9 is "considering" WOFF support
http://hacks.mozilla.org/2009/10/woff/

The WOFF format is pretty new and you won't find too many fonts yet, and they are most commercial (not free).

sixonetonoffun wrote:

Being a dialup user I have mixed feelings on the topic of embedded anything.

The WOFF format uses zip compression, typically resulting in a filesize reduction from ttf of over 40%

This format claims two main advantages over raw TrueType or OpenType fonts.

1. It is compressed, which means that you will typically see much smaller download sizes compared with raw TrueType or OpenType fonts.
2. It contains information that allows you to see where the font came from – without DRM or labeling for a specific domain – which means it has support from a large number of font creators and font foundries.

more history and info on WOFF
http://arstechnica.com/web/news/2009/11/web-open-font-format-backed-by-mozilla-type-foundries.ars

Now you just have to find the perfect font for your purposes Smile

(in three different formats, lol)

Posted: Fri Feb 05, 2010 3:57 pm

Wow...sixonetonoffun - how the heck are you?!

Posted: Fri Feb 05, 2010 5:51 pm

I'm awesome today just picked up a verizon powered EVDO U760 and am a lot less strangled by the wonderful wires or Quest. No DSL but its so much faster then the dialup! All that and powered by Mepis Linux 8 !! Kinda scared of the 5GB limit... but its all good!

I'm taking notes and hoping to have some feedback for ya all soon after this next release of RavenNuke™ GO Team! Woohoo!!

Posted: Sun Feb 07, 2010 11:45 am

haha, well played with some EOT stuff and didn't get too far. Typical IE stuff. The WEFT tool they offer is hard to use, gave me the message "this may take a long time" 4 different times thru the wizard process; which eventually crashed. Not to mention, WEFT is over 10 years old and designed for win98... Don't waste your time
http://www.microsoft.com/typography/WEFT.mspx

The Only registered users can see links on this board! Get registered or login! doesn't work either. There may be working tools out there, but pretty unprofessional IMO when your applying to the W3C for inclusion as a standard.

I'm not sure if the W3C is looking to support multiple standards for fonts or not, but if they are looking to support only one, I'd bet my money on WOFF.

Posted: Mon Feb 08, 2010 2:48 pm

Ok I updated my simple demo for cross browser support, including:

Internet Explorer 4+ (EOT)

Firefox 3.6+ (WOFF)

Firefox 3.5-, Opera, Chrome, gecko based browsers (OTF)

iPhone (SVG)

Only registered users can see links on this board! Get registered or login!

On a non-testing site you would probably want to do more tinkering with sizes, etc.. so just for fun/concept only. If you want to see what was done checkout the css files. Haven't tested in every format, for instance I don't have iPhone...

Also made a great discovery/resource:

An online font-face generator that works! Pack your fonts into multiple formats and build your css in a few minutes Smile

Only registered users can see links on this board! Get registered or login!

100's of font "packs" that download as a functional demos, showing what you'll need to do for your site...

Only registered users can see links on this board! Get registered or login!