Hi , I've got a font from font squriel that I'd like to use. Its a .ttf format. How do I use css3 to display this font? Also I'd like to make sure it degrades nicely on older browsers for example where CSS3 isnt supported , a image is served up. Any ideas?

Have a look at this page:

 

http://www.w3schools.com/css3/css3_fonts.asp

 

Edit: As for detecting whether css3 is supported or not, take a look at this page as well:

 

http://www.sitepoint.com/detect-css3-property-browser-support/

 

It will take some javascript. Detecting whether a browser supports css3 without js is beyond my knowledge

Edited June 18, 201214 yr by Pete Prosper

A great website to get started in using your own fonts is to use cufon.

 

http://cufon.shoqolate.com/generate/

 

You upload your font file, fill in some settings (most of these just leave untouched) and it will generate a javascript file for your font. You then include this and the cufon library on your website and voila!

 

Have a look at their documentation: https://github.com/sorccu/cufon/wiki/

 

Have fun!

font squirrel has a built in @font-face generator, designed specifically for this.

First off, forget degrading to an image and definitely forget Cufon. When it comes to text, "degrading nicely" means making sure that the next fallback in the font-family stack is a system font that shares similar proportions.

First off, forget degrading to an image and definitely forget Cufon. When it comes to text, "degrading nicely" means making sure that the next fallback in the font-family stack is a system font that shares similar proportions.

 

Would you care to explain why you think cufon is a bad option? (Don't take this harshly, just a question)

 

I personally haven't had a problem with it and during reviews and cross browser testing, it seemed the only stable option to me :-)

First off, forget degrading to an image and definitely forget Cufon. When it comes to text, "degrading nicely" means making sure that the next fallback in the font-family stack is a system font that shares similar proportions.

How accurate are conditional style sheets? Would serving up a specfic style sheet with the graphic instead of the Fontface work?

My main problems with Cufon:

 

• It requires Javascript to fulfil the single most basic requirement of a web browser: displaying text
  
• Making text selectable is a pain in the arse
  
• Drawing the text using VML or <canvas> (IE/non-IE) is orders of magnitude slower than native font rendering
  
• It interferes with normal CSS typography
  
• It was conceived as a stopgap to the problem of web fonts. It's a clunky, hacky workaround that's rendered obsolete by the reliable cross-browser implementation of @font-face - hell, even Cufon's homepage advises you to use Typekit instead
  

 

@font-face is here, it works and is the definitive way to use web fonts, whether you self-host, use Typekit or Google Fonts. It's text rendered as text by the OS' font rendering engine, which is exactly how it should be.

Edited June 18, 201214 yr by Renaissance-Design

How accurate are conditional style sheets? Would serving up a specfic style sheet with the graphic instead of the Fontface work?

 

There shouldn't be any need - here's a matrix of browser support for @font-face. It's been in IE snce IE4.

There shouldn't be any need - here's a matrix of browser support for @font-face. It's been in IE snce IE4.

Cool thanks

My main problems with Cufon:

 

• It requires Javascript to fulfil the single most basic requirement of a web browser: displaying text
  
• Making text selectable is a pain in the arse
  
• Drawing the text using VML or <canvas> (IE/non-IE) is orders of magnitude slower than native font rendering
  
• It interferes with normal CSS typography
  
• It was conceived as a stopgap to the problem of web fonts. It's a clunky, hacky workaround that's rendered obsolete by the reliable cross-browser implementation of @font-face - hell, even Cufon's homepage advises you to use Typekit instead
  

 

@font-face is here, it works and is the definitive way to use web fonts, whether you self-host, use Typekit or Google Fonts. It's text rendered as text by the OS' font rendering engine, which is exactly how it should be.

 

Interesting reasons, I personally never experienced any major problems, but it's great to see opinions on this, I do now however use TypeKit myself using @font-face, but for people who want a quick alternative, then cufon isn't all that bad?

 

Thanks for the opinion though!