HTML and CSS Reference
In-Depth Information
@font-face {
font-family: "Vera Sans Mono";
src: url(fonts/BSVSM.eot);
src: local("Bitstream Vera Sans Mono"),
url(fonts/BSVSM.ttf)format("truetype");
}
For further discussion of offering multiple font format options, see Paul
Irish's article “Bulletproof @font-face syntax” (
http://paulirish.com/2009/
Creating Embeddable Fonts
So, where do you get all these different font formats if all you have is a
TrueType or OpenType font?
The Font Squirrel @font-face Generator (
http://www.fontsquirrel.com/
fontface/generator
)
takes any uploaded font and converts it into all the
formats mentioned earlier as well as offers sample CSS embedding code.
Microsoft released the Web Embedding Fonts Tool (WEFT), a Windows
utility to create EOT files, and there are WOFF generators being worked
on, but since Font Squirrel provides that format as well, individual tools
aren't necessary.
Font Licensing and Foundries
Even under the protection provided by the EOT or WOFF format, by
distributing a web font, you may be breaking the licensing terms set by
the foundry that designed and sold that font. When starting with a fresh
design, it may be smarter to start with typefaces whose licensing options
are known. Finding good-quality fonts with options for web embedding
is getting easier by the day (as I write this, I'm looking forward to the
