Non standard font displayed as text. Apparently "just" CSS. How?

[Artyboots]

Hello all,

Please see http://www.autism.org.uk/working-with.aspx or any page on this nicely-designed site. How has this been achieved - ie the headings and subheadings that are in a handwriting font but display as text, not a graphic?

Have thought about all the font processing methods and can't spot this one. Am sure it is obvious to all but me.

Thanks.

[gwpriester]

Welcome to TalkGraphics

There are several services that let you use non-web safe fonts such as www.TypeKit.com. You pay for a level of service and insert a bit of code into your page (via a placeholder). When you page loads on the Internet the page sends a request for the fonts which are then used.

[Artyboots]

Hello Gary

Thanks for replying. I know those services but couldn't spot any of them in the code. Looks nice, though. You can see it's referring, because in the split second of loading it's a regular web-safe font. Just wondered where it was going to.

All the best.

[The Alien]

Hello and welcome.
The text you're referring to is inside a <div id="headerContent"><H1>. The site loads a lot of CSS files. Upon inspection, you can see that screen.css is loaded. When you open it, you can see that it imports typography.css amongst other .css files.
Inside typography.css you can see that the web developer has imported his/her own font (yes, you can do that in CSS! ) using @font-face{}. He/she assigned a name to it and then continued coding the rest of the CSS below it - as usual - and wrote
H1, <and a bunch of other headers> {font-family: customFontName, Verdana, Arial, etc.}
You can google the @font-face for explanation on how to use it.

[Artyboots]

Hi Alien

You are quite right.

I love this handwriting font, and on discovering the font house imagine that the designer was kind enough to allow a charity to link to it. This wouldn't be possible with commercial fonts, except via a font service, such as Gary describes.

These are interesting times for web design.