html5 @font-face

[BluegillMedia]

Anyone know about Mac vs. PC fonts and using them with the @font-face in html5?

This is what I think is true, please correct me if you know better:

• otf fonts are both Mac & PC compatible
• ttf fonts are one or the other (not cross-platform) and therefore will only work in one or the other? So developing on a Mac, I can't just use a ttf font that is made for a Mac; it wouldn't function in Firefox on a PC (I assume)?
• I had thought that IE9 accepted ttf files, but this website says otherwise http://webfonts.info/wiki/index.php?...rowser_support. It sounds like you still need to create EOT files, which I am guessing I can not do from a Mac ttf fonts - hopefully it would work with otf files.

Any of that info incorrect?

[BluegillMedia]

So far my impressions of the @font-face is that it isn't remotely worth the effort. Is there a simple method? (start with an OTF and convert it to an EOT and assign both the OTF and the EOT?).

[aj_nsc]

@font-face is DEFINITELY worth the effort, especially because there's not a whole lot of effort involved.

Start with an otf or ttf and go to http://www.fontsquirrel.com/fontface/generator

Upload your font and it will automatically generate eot, otf/ttf, svg, and woff

Then, very simply, use the following syntax on your site:

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

http://www.fontspring.com/blog/furth...etproof-syntax

That's it....now how easy was that?

EDIT: I understand your frustrations, though, when I first started to use it, it took me forever to come across the proper, quite long, CSS syntax to make fonts work cross browser. Then, with the advent of font squirrel, web fonts became an absolute breeze. Don't go overboard with them, though, downloading the font files still chew up bandwidth (especially svg)

[BluegillMedia]

Does it matter if it is a Mac or a PC .ttf file?

[aj_nsc]

I know Mac's tend to use otf's and I also know, from experience working with designers, that when I ask for a font that they've used on a site they designed, they try to send me the ttf from their mac and it's usually a 0KB file, so there may be something tricky with where the fonts are stored on a Mac, I'm not sure.

Font squirrel will accept either otf or ttf font files, doesn't matter what OS they came from, just make sure it's not a 0KB file that you're trying to upload.

[RefinedJam]

Like aj has said use font squirrel, pc will not have as nice smoothing on font but they will work on both and even on IE !

I use it on all my websites and the fontsquirrel fontface generator is awesome.

[BluegillMedia]

Using font squirrel worked great once I found an actual ttf or otf fonts (older mac fonts are postscript fonts).

One more question. Say I am dealing with a condensed font (which I am), the only default condensed font to use as a backup (cross-browser/platform etc) is Arial Narrow. But Arial Narrow isn't nearly as condensed as the font that I am using. I know you can modify your font-weight/style within the @font-face (as below), but I take it you can't add in letter-space? Because League Gothic is so narrow, I want to space the letters a bit so that it is easier to read, but if I do that it makes it so the backup (the arial narrow) doesn't fit within the space that I have.

Is there a way to add letter-space to my League Gothic, and not to the font backups?

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('league_gothic-webfont.eot');
    src: url('league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('league_gothic-webfont.woff') format('woff'),
         url('league_gothic-webfont.ttf') format('truetype'),
         url('league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal; 	
}

hgroup h1 { font-family: "LeagueGothicRegular", "Arial Narrow", "Myriad Pro Semibold", Arial, Helvetica, sans-serif; }

[StanleyJenkins]

This is sort of related to the topic of the thread, but I highly recommend looking to Google's Font API instead of monkeying around with @font face.

http://code.google.com/apis/webfonts/

It's so much easier to use, and you don't even have to import anything. Let Google do the work for you.

[aj_nsc]

This is sort of related to the topic of the thread, but I highly recommend looking to Google's Font API instead of monkeying around with @font face.

http://code.google.com/apis/webfonts/

It's so much easier to use, and you don't even have to import anything. Let Google do the work for you.

and you're limited to 100 or so fonts. I am a big fan of google's web font service (which uses @font-face because that's the only way to embed fonts without Javascript), but sometimes you just can't find the type face your looking for.

@font-face is really quite easy once you get all the relevant information down, no reason to shy away from it.

[BluegillMedia]

Looks pretty similar to @font-face you just use their library of fonts instead of converting fonts yourself and adding your own @font-face etc. Does that kind of sum it up?

This is sort of related to the topic of the thread, but I highly recommend looking to Google's Font API instead of monkeying around with @font face.

http://code.google.com/apis/webfonts/

It's so much easier to use, and you don't even have to import anything. Let Google do the work for you.

[BluegillMedia]

Oh one more quick question. If you are using the font-squirrel method or the Google method - are you still applying backup fonts, or are you pretty much good to go for IE 7 - 9 plus Firefox, Safari and Chrome?

In otherwords can I just apply kerning (letter-spacing) without worries that it will screw up my backup fonts?

[aj_nsc]

Well, whether you want to apply backup fonts or not depends on your target audience.

I can guarantee, however, that font squirrel fonts using the new bulletproof @font-face syntax will work in IE5.5+ (yes, that's 5.5), Firefox 3.5+, Chrome 4+ and Safari 3.2+, Opera 10+ (that should cover your bases). If you're satisfied with that level of browser support, then I'd say forget the backup fonts (except maybe a serif/sans-serif depending on the style you're using).

They say iOS Safari uses the SVG fonts, but I've got iOS4.0.1 and they don't work on my phone. Something to watch out for.

Google Fonts Library is a little easier than the @font-face method because all you have to do is link a stylesheet containing the font you want to use. Google does all the @font-face behind the scenes.

[BluegillMedia]

I tried my site on my iPhone 4 and the office iPad(2) and the custom fonts came through. I would say that spectrum of browsers is more then sufficient and covers 99%.