ansaurus

Question

Answer 1

+5 A:

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/

Simon Brown 2010-06-03 20:02:08

Wow that's an old article :) Glad Netscape Navigator is on the ball

zildjohn01 2010-06-03 20:17:11

I'd rather have IE6 than netscape...

CrazyJugglerDrummer 2010-06-03 20:39:20

Edited to link to newer article.

Simon Brown 2010-06-03 20:49:05

Changed my down vote to a up vote after change to recent article :)

Phliplip 2010-06-03 21:00:26

-1 because the site in question actually uses TypeKit, and the answer is too simple.

Andrew 2010-06-04 13:56:42

Answer 2

+7 A:

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.

Andrew 2010-06-03 20:11:15

That's some good reading. Thanks for the links!

GalacticCowboy 2010-06-03 20:29:41

Answer 3

+2 A:

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"&gt;
<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"&gt;
                <mrow>
                    <mi>x</mi>
                    <mo>=</mo>
                    <mfrac>
                        <mrow>
                            <mo form="prefix">&#x2212;<!-- &minus; --></mo>
                            <mi>b</mi>
                            <mo>&#x00B1;<!-- &PlusMinus; --></mo>
                            <msqrt>
                                <msup>
                                    <mi>b</mi>
                                    <mn>2</mn>
                                </msup>
                                <mo>&#x2212;<!-- &minus; --></mo>
                                <mn>4</mn>
                                <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
                                <mi>a</mi>
                                <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
                                <mi>c</mi>
                            </msqrt>
                        </mrow>
                        <mrow>
                            <mn>2</mn>
                            <mo>&#x2062;<!-- &InvisibleTimes; --></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

Xiong Chiamiov 2010-06-03 20:29:17

Not sure how this plays with the legal side of things, but the FontSquirrel generator includes a flag that mangles the font in such a way that it cannot be installed or used as a desktop font. Of course, they still require you to state that you have the right to distribute the font...

GalacticCowboy 2010-06-03 21:00:31

Answer 4

+2 A:

The Google Font Directory is an interesting resource for understanding the direction web fonts are moving in:

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

blissapp 2010-06-03 20:37:24

Answer 5

+2 A:

Google recently released Font API, it might be of some use to you.

Josef Sábl 2010-06-03 21:31:33

ansaurus

tags:

views:

answers:

Non-Standard fonts in web?

related questions