www.webdeveloper.com
Results 1 to 13 of 13

Thread: html5 @font-face

  1. #1
    Join Date
    Nov 2006
    Posts
    64

    html5 @font-face

    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?
    Last edited by BluegillMedia; 05-19-2011 at 12:08 PM.
    Hey, I like potatoes!
    Support the wwf org!

  2. #2
    Join Date
    Nov 2006
    Posts
    64
    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?).
    Hey, I like potatoes!
    Support the wwf org!

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    @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:

    Code:
    @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)
    Last edited by aj_nsc; 05-19-2011 at 04:25 PM.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  4. #4
    Join Date
    Nov 2006
    Posts
    64
    Does it matter if it is a Mac or a PC .ttf file?
    Hey, I like potatoes!
    Support the wwf org!

  5. #5
    Join Date
    Dec 2005
    Posts
    2,984
    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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  6. #6
    Join Date
    May 2011
    Posts
    3
    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.

  7. #7
    Join Date
    Nov 2006
    Posts
    64
    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?

    Code:
    @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; 	
    }
    Code:
    hgroup h1 { font-family: "LeagueGothicRegular", "Arial Narrow", "Myriad Pro Semibold", Arial, Helvetica, sans-serif; }
    Hey, I like potatoes!
    Support the wwf org!

  8. #8
    Join Date
    May 2005
    Location
    Rochester, NY
    Posts
    30
    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.

  9. #9
    Join Date
    Dec 2005
    Posts
    2,984
    Quote Originally Posted by StanleyJenkins View Post
    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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  10. #10
    Join Date
    Nov 2006
    Posts
    64
    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?

    Quote Originally Posted by StanleyJenkins View Post
    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.
    Hey, I like potatoes!
    Support the wwf org!

  11. #11
    Join Date
    Nov 2006
    Posts
    64
    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?
    Hey, I like potatoes!
    Support the wwf org!

  12. #12
    Join Date
    Dec 2005
    Posts
    2,984
    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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  13. #13
    Join Date
    Nov 2006
    Posts
    64
    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%.
    Hey, I like potatoes!
    Support the wwf org!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles