Non-Standard fonts in web?
I recently came across a web page using the font “ff-tisa-web-pro-1” (specified in their CSS file).
How does that work? I definitely don’t have this font on my computer, yet it was displayed.
Solution 1:
As Simon pointed out, the CSS @font-face declaration can be used to implement traditionally non-web-safe fonts on your site. If you want to try it yourself, definitely check out Paul Irish's now famous bulletproof font face implementation, which links to FontSquirrel's font file generator. It's now supported cross-browser with the right implementation, although with most fonts you'll have to deal with licensing, and consistent rendering is still an issue.
The site you asked about though uses Typekit, one of several new services that will host and serve font files for you (for a fee), and offers you an easy implementation that masks the complications of @font-face. Google's Font API is similar, although it's free and only hosts/serves a small selection of free fonts.
Also, non-native alternative techniques for embedding fonts have been around for a while (although they wouldn't be indicated in the CSS), see cufon and sIFR.
Solution 2:
You can use CSS to embed fonts in web-pages.
Want to get away from ‘Web Safe’ fonts for some attractive headers AND do it without using an image? Use CSS 3 and embed a font-face!
http://www.zenelements.com/blog/css3-embed-font-face/
Solution 3:
Here's a sample page I was playing around with recently to view math formulas in Firefox. The part you are (likely) most interested in is the css @font-face declaration at the top, and the style="font-family: DejaVu Serif Web;" assigned to the <div> and <math> tags.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>mathy fonts test</title>
<style type="text/css">
@font-face {
font-family: DejaVu Serif Web;
src: url(/fonts/DejaVu/ttf/DejaVuSerif.ttf) format("truetype");
}
</style>
</head>
<body>
<h1>DejaVu Serif</h1>
<div style="font-family: DejaVu Serif Web;">
<p>
Nulla eu commodo neque. Donec nec nisi libero. Integer sollicitudin leo
vel arcu elementum mattis. Vivamus eu sodales odio. Curabitur eu auctor
leo. Pellentesque adipiscing nulla iaculis ante commodo aliquet. Donec
egestas tincidunt tincidunt. Nunc ut condimentum orci. Aenean in egestas
tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur suscipit, sapien ut dignissim
pellentesque, lacus risus facilisis odio, et tristique nunc quam et
mauris. Quisque pellentesque nulla et dui bibendum suscipit. Aenean
consectetur adipiscing nulla, a molestie nunc semper non. Quisque at
ipsum quis turpis gravida commodo et vel felis. Integer lobortis augue
eu tortor aliquet nec mattis nulla aliquam. Sed ornare cursus urna et
congue.
</p>
<p>
<math style="font-family: DejaVu Serif Web;" mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">−<!-- − --></mo>
<mi>b</mi>
<mo>±<!-- ± --></mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−<!-- − --></mo>
<mn>4</mn>
<mo>⁢<!-- ⁢ --></mo>
<mi>a</mi>
<mo>⁢<!-- ⁢ --></mo>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢<!-- ⁢ --></mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</p>
</div>
</body>
</html>
If viewing locally, it has to be saved as .xhtml, not just .html, which got me for a bit. This is, of course, related to the math-y stuff, not the font-face, so it's only a note if you're trying to use this code whole.
There's a decent list of fonts you can (legally) embed in your document here.
Typekit also provides a nifty way to embed fonts that do require licensing deals with type foundries. They currently offer the ability to use one font (of your choice) for free.
Font linking has been in browsers for quite some time; the issue was with what format you could use. Microsoft, of course, supported a proprietary font format, and Mozilla did not. sigh
Solution 4:
The Google Font Directory is an interesting resource for understanding the direction web fonts are moving in:
http://code.google.com/webfonts/preview
Solution 5:
Google recently released Font API, it might be of some use to you.