beautiful fonts with @font-face ✩ Mozilla Hacks

While Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, and multiple weights along with support for rendering complex scripts, authors are still limited to using commonly available fonts in their designs. Firefox 3.5 removes this restriction by introducing support for the CSS @font-face rule, a way of linking to TrueType and OpenType fonts just as code and images are linked to today. Safari has supported this type of font linking since version 3.1, and Opera has announced that they plan to support it in Opera 10.

Using @font-face for font linking is relatively straightforward. Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it’s bold or italic. Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

Browsers that support @font-face will render text using Graublau Sans Web while older browsers will render text using either Lucida Grande or the default sans-serif face. Example here:

Digging A Little Deeper

Most font families today consist of only four faces: regular, bold, italic and bold italic. To define each of these faces the font-weight and font-style descriptors are used. These define the style of the face; there’s no concept of a cascade or inheritance that applies here. Without an explicit definition each of these defaults to a value of ‘normal’:

/* Gentium by SIL International   */
/* http://scripts.sil.org/gentium */
 
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf);
  /* font-weight, font-style ==> default to normal */
}
 
@font-face {
  font-family: Gentium;
  src: url(GentiumItalic.ttf);
  font-style: italic;
}
 
body { font-family: Gentium, Times New Roman, serif; }

The sample text below when rendered with this font family:

A feature that’s easy to overlook is that @font-face allows the creation of families with more than just regular and bold faces — up to nine weights can be defined for a single family. This is true even on Windows, where underlying platform limitations usually restrict font families to just regular and bold weights. Fonts such as those of the Japanese open source M+ Fonts project have as many as seven weights. A selection of these are used in the sample below:

In some situations, authors may prefer to use fonts available locally and only download fonts when those faces aren’t available. This is possible with the use of local() in the definition of the src descriptor of an @font-face rule. The browser will iterate over the list of fonts in the src descriptor until it successfully loads one.

/* MgOpen Moderna                      */
/* http://www.zvr.gr/typo/mgopen/index */
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue"), 
       local("HelveticaNeue"), 
       url(MgOpenModernaRegular.ttf);
}
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), 
       local("HelveticaNeue-Bold"), 
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
 
body { font-family: MyHelvetica, sans-serif; }

The screenshot below shows from top to bottom the results on Mac OS X, Windows and Linux for a simple testcase that uses the font family defined above:

The Helvetica Neue font family is available on most Mac OS X systems but generally on neither Windows nor Linux machines. When the example here is rendered on Mac OS X, the local Helvetica Neue faces are used and no font is downloaded. Under Windows and Linux the attempt to load a local font fails and a substitute font — MgOpen Moderna — is downloaded and used instead. MgOpen Moderna is designed to be a substitute for Helvetica, so it renders similarly to Helvetica Neue. This way, an author can guarantee text appearance but avoid a font download when it’s unnecessary.

The name used to refer to a specific font face is the full name for an individual font. Generally it’s the family name plus the style name (e.g. “Helvetica Bold”). Under Mac OS X, the name is listed in the information panel for a given face. Select a single face and choose ‘Show Font Info’ from the Preview menu in FontBook:

Similar tools exist under Linux. On Windows, use the font properties extension, a free download from Microsoft to view these names. With the extension installed, the properties panel shows information about an individual font. The full name is referred to as the “Font Name” on the Name tab:

Safari only supports PostScript name lookup under Mac OS X, so under Mac OS X Postscript names are also supported. For OpenType PS fonts (often labeled with an .otf extension) the full name is the same as the PostScript name under Windows. So for these fonts, authors are advised to include both the full name and the PostScript name for cross-platform interoperability.

Supporting Many Languages

Many languages suffer from a lack of commonly available fonts. For minority languages and ancient scripts, the options often dwindle to just a handful. The use of @font-face allows authors using these languages to ameliorate this by including fonts with their pages.

@font-face {
  font-family: Scheherazade;
  src: url(fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), 
       url(fonts/ScheherazadeRegOT.ttf) format("opentype");
}
 
body { font-family: Scheherazade, serif; }

Languages such as Arabic require text shaping, where the display of a given character is affected by the characters surrounding it. Different platforms support different rendering technologies to enable text shaping; under Mac OS X, AAT fonts are required while under Windows and Linux OpenType fonts are required. Without a font in a format required for a given platform, text shaping will not be rendered correctly.

Under Mac OS X, the AAT version of the font is downloaded. On Windows and Linux, where rendering with AAT fonts is not supported, the download of the AAT font is skipped and the OpenType font is used instead. Hence, the text is rendered correctly on all platforms.

Cross-Site Font Usage

By default, Firefox 3.5 only allows fonts to be loaded for pages served from the same site. This prevents sites from freely using fonts found on other sites. For sites that explicitly want to allow cross-site font sharing, an online font library for example, Firefox 3.5 supports the use of access control headers to control this behavior. By adding an additional header to the HTTP headers sent with font files, sites can enable cross-site usage.

# example Apache .htaccess file to add access control header
 
<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

With this HTTP header enabled, any page can access the fonts on this site, not just pages from the same site.

Font Licensing Issues

When using a font for a website, it’s important to always confirm that the font license permits use on a website. If the license agreement is filled with opaque legalese, err on the side of caution and check with the font vendor before using a font on a site. If the license permits its use, it’s a good idea to add a comment near the @font-face rules that points to the license, for future reference.

“I found a free font, can I use it on my site?”

Maybe, maybe not. Some free fonts are distributed as teaser products to encourage a purchase and don’t allow for redistribution or posting on a web server. Check the license, even for free fonts.

“I just want to use [insert favorite font name here] on my site. Is that possible?”

Right now, probably not. The use of font linking on the web is still in its infancy. Most fonts that ship with proprietary OS’s today have licenses that limit their use to standard desktop applications, so uploading these fonts to a web server is almost certainly not permitted. Piracy has plagued the font industry in the past, so most font vendors are wary of allowing their fonts to be used except in relatively limited contexts. Many font vendors are focused on the needs of publishing and printing industries, and the relative complexity of their license agreements often reflects this. In the future, some font designers may conclude that the sales of fonts as web fonts will outweigh any potential loss in sales due to piracy, others may not. Their license agreements will reflect this choice and should be respected.

The stock photography market is often described as a $2 billion market but the web font market is still close to a $0 market, it can only go up!

Font Linking In Internet Explorer

Font linking has been possible with Internet Explorer but only for linking to fonts in the proprietary EOT font format. The only way to create EOT fonts is to use the Microsoft WEFT tool, available only on Windows. Only TrueType and OpenType TT fonts can be converted to EOT format, OpenType PS (.otf) fonts cannot be used.

Internet Explorer only recognizes the font-family and src descriptors within @font-face rules, so each family can only contain a single face. It doesn’t understand format() hints and will ignore any @font-face rule containing these hints. This behavior can be used enable font linking cross platform:

/* Font definition for Internet Explorer */
/*         (*must* be first)             */
@font-face {
  font-family: Gentium;
  src: url(Gentium.eot) /* can't use format() */;
}
 
/* Font definition for other browsers */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf) format("opentype");
}

Future Work

For Firefox 3.5, the font-stretch and unicode-range descriptors are not supported. Fonts defined in SVG documents are also not supported yet. These are under consideration for inclusion in future releases. As always, patches are welcome!

Further Resources

Translations

Belorussian translation

Documentation

Examples

Font Resources

Font Politics

177 comments

Comments are now closed.

Pingback from Encyclopædic type | More On Design on August 30th, 2009 at 3:03 pm:

[...] of apothecary inspiration Jack Pierson — neon signs The making of Phaeton CSS text rotation Beautiful fonts with @font-face Granshan 09 Type Design Competition ‘Punctuation hero’ branded a vandal Blanka: [...]
Pingback from 50 Essential Web Typography Tutorials, Tips, Guides and Best Practices : Speckyboy Design Magazine on August 31st, 2009 at 3:59 am:

[...] beautiful fonts with @font-face [...]
Pingback from CSS3新特性一览 | EViit on September 2nd, 2009 at 9:08 am:

[...] beautiful fonts with @font-face [...]
Pingback from What’s Cool in Opera 10 | K-Squared Ramblings on September 2nd, 2009 at 11:24 am:

[...] can read more about web fonts at Mozilla Hacks, and see them in action at Speed Force (font [...]
Pingback from Sintaxis de @font-face | CSSBlog ES on September 10th, 2009 at 5:26 am:

[...] tiene la fuente instalada en su ordenador, podremos ahorrarnos la descarga. El problema es que Safari sólo utilizará el nombre PostScript, no el nombre de la fuente completa, así que cuando estas sean diferentes, incluiremos ambos [...]
Pingback from @font-face e Webfonts: come usarli | DesignerBreak on September 11th, 2009 at 1:55 pm:

[...] Posso usare qualsiasi font? No, siete ovviamente limitati dalla End User Licensing Agreement (EULA), ovvero i termini della licenza, quindi scegliete attentamente quali font usate. Ad esempio non potete caricare online un font tra quelli che avete nel vostro sistema operativo perchè solitamente hanno una licenza che ne regola l’uso solo su applicazioni per desktop. Caricandoli violereste la licenza esponendo il font alla possibilità di essere scaricato da chiunque perchè è su un server pubblico. Sciegliete sempre font che sapete avere una licenza apposta per l’inclusione. Leggete sempre attentamente l’EULA anche se avete acquistato il font perchè in realtà pagate per un permesso d’utilizzo, ma non lo possiedete realmente. Su Font Feed spiegano molto bene come leggere l’EULA con l’esempio della nuova versione pubblicata da Fontfont. Se trovate un font gratuito e non siete sicuri riguardo alla licenza, ma volete includerlo probabilmente è una buona idea aggiungere nel foglio di stile un commento dove chiedere il permesso vicino alla regola @font-face. Almeno questo è quello che suggerisconono su Hack.Mozilla. [...]
Pingback from font-face and Webfonts: How To Use Them | Designer Break English on September 11th, 2009 at 2:01 pm:

[...] Can I use every font I want? No, you are obviously limited by End User Licensing Agreement (EULA) therefore choose carefully which fonts you use. For instance you can’t upload online a font among those that came with your OS because they are generally licensed strictly for a use within desktop applications. By uploading them you would violate the license and also expose that font to be downloaded by anyone as it’s on a web server. Always choose fonts you know that are specifically licensed for embedding. Always read carefully the EULA of the font you bought or found online, because even when you pay you’re not really owning the font but only a license to use it. On Font Feed they explain very well how to read an EULA with the exemple of the new version used at Fontfont. If you find a font which is free and you are not sure about you can write a comment in your stylesheet near the @font-face rule asking for permission, as it is suggested on Hack.Mozilla. [...]
Pingback from font-face and webfonts « Designer Break english mobile on September 12th, 2009 at 4:34 pm:

[...] Can I use every font I want? No, you are obviously limited by End User Licensing Agreement (EULA) therefore choose carefully which fonts you use. For instance you can’t upload online a font among those that came with your OS because they are generally licensed strictly for a use within desktop applications. By uploading them you would violate the license and also expose that font to be downloaded by anyone as it’s on a web server. Always choose fonts you know that are specifically licensed for embedding. Always read carefully the EULA of the font you bought or found online, because even when you pay you’re not really owning the font but only a license to use it. On Font Feed they explain very well how to read an EULA with the exemple of the new version used at Fontfont. If you find a font which is free and you are not sure about you can write a comment in your stylesheet near the @font-face rule asking for permission, as it is suggested on Hack.Mozilla. [...]
Pingback from Barker Design | Graphic & Web Development » Blog Archive » Encyclopædic type on September 15th, 2009 at 7:10 am:

[...] of apothecary inspiration Jack Pierson — neon signs The making of Phaeton CSS text rotation Beautiful fonts with @font-face Granshan 09 Type Design Competition ‘Punctuation hero’ branded a vandal Blanka: [...]
Pingback from A giant step for typography on the Web | Type Directors Club on September 15th, 2009 at 12:20 pm:

[...] * This page on mozilla.org goes in to greater depth on the technology, with some examples: http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ [...]
Pingback from zomigi.com » Roundup of Font Embedding and Replacement Techniques on September 17th, 2009 at 8:00 am:

[...] Beautiful fonts with @font-face [...]
Pingback from 50 Essential Web Typography Tutorials, Tips, Guides and Best Practices | WEBDESIGN FAN on September 18th, 2009 at 10:41 am:

[...] beautiful fonts with @font-face [...]
Pingback from 21 Awesome @font-face Embedable Typefaces | Spyre Studios on September 18th, 2009 at 1:06 pm:

[...] Also be sure to check out the ‘further resources‘ section at the bottom of this post for more infos, especially on how to get @font-face to work in IE using EOT font files. [...]
Sébastien Méric wrote on September 18th, 2009 at 6:17 pm:

hi,

here is an online TTF to EOT font converter :

http://www.cuvou.com/wizards/ttf2eot.cgi

this may help someone…

thanks for all of these usefull informations :)

seb
Pingback from Adding @font-face CSS support for Fennec on Windows Mobile « Daniel Hodgin's Blog on September 27th, 2009 at 6:59 pm:

[...] far. I also spoke briefly with John Dagget (irc: nattokirai) who has had a hand in this and has a blog about the subject in Firefox 3.5 and is listed as the editor on the W3C page on the @font-face [...]
Trackback from Chrimi testblog on October 1st, 2009 at 10:17 am:

Embedden Sie jetzt!…

Mit @font-face lassen sich Schriften in Webseiten einbetten. Machen Sie das!
Ok, es ist soweit, mit dem neuen Firefox 3.5 (und Safari 4 und Opera 10beta), steht immer mehr Nutzern unserer Websites Fontembeddingdownloading1 zur Verfügung. Damit wi…
Trackback from Chrimi testblog on October 1st, 2009 at 11:07 am:

Bulletproof @font-face syntax…

Let me introduce you to the best way to do your @font-face definitions:
@font-face {
font-family: ‘Graublau Web’;
src: url(GraublauWeb.eot);

src: local(‘Graublau Web Regular’), local(‘Graublau Web’),
url(GraublauWeb.otf) fo…
G Nelson wrote on October 8th, 2009 at 4:49 am:

I’m trying to find an answer for this, and haven’t been able to, so I figure I’d post it here, the grandaddy of @font-face tutorials. Does anyone know if it is possible to control the numeral formatting of an OpenType font from CSS? I’m embedding an OTF font that supports both lining and oldstyle figures, and want to tell the browser to render them oldstyle (similar to using the ‘Typography’ menu in Cocoa-based apps in OS X). Can this be done in CSS?
Pingback from @font-face: The Potential of Web Typography | Focus After on October 12th, 2009 at 10:17 am:

[...] John Daggett has written a lovely primer article on @font-face. It serves as a fine reference into the nitty gritty of @font-face implementation and [...]
Christopher Blizzard wrote on October 12th, 2009 at 11:14 pm:

@G Nelson – keep in touch, we’ll have some stuff to talk about soon. :)
James John Malcolm wrote on October 13th, 2009 at 2:16 am:

@G Nelson – If you can re-export it (or get it re-exported) without lining figures it should work.

@Blizzard – If it is what I think that it is: Awesome!
John Daggett wrote on October 13th, 2009 at 5:11 am:

@G Nelson – the short answer is no, you can’t currently specify OpenType or AAT feature properties as per the typography panel. This is something currently under investigation, both from the standards viewpoint (how to extend CSS to support font features) and from the implementation viewpoint (how to actually implement it).
Pingback from Web Open Font Format for Firefox 3.6 at hacks.mozilla.org on October 20th, 2009 at 9:01 am:

[...] Firefox 3.5 we included support for linking to TrueType and OpenType fonts. In Firefox 3.6 we’re including support for a new font format – the Web Open Font [...]
Pingback from @font-face rule | 따라쟁이 on October 24th, 2009 at 8:06 am:

[...] beautiful fonts with @font-face [...]
Pingback from User Experience and web consultant, Tim Minor on October 26th, 2009 at 7:02 am:

[...] http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ [...]
Pingback from Modern CSS Layouts: The Essential Characteristics « Smashing Magazine on October 26th, 2009 at 8:42 am:

[...] Beautiful Fonts With @font-face [...]
Pingback from In the Woods – How to Achieve Cross Browser @font-face Support on October 26th, 2009 at 6:03 pm:

[...] If it is, we don’t want to download the font over the network. There are two of them because Safari only supports the postscript font name, so when the postscript name differs from the normal name, you should include both. The next format [...]
Pingback from @font-face kullanımı / Fatih Hayrioğlu'nun not defteri on October 29th, 2009 at 10:16 am:

[...] http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ (detaylı) [...]
Pingback from Docbook, Pandoc, Rants and Some Decent Free Fonts | Idiotprogrammer on October 29th, 2009 at 2:25 pm:

[...] a good (and indispensable) article about how to use the font-face css rule to use any of these awesome free [...]
rob wrote on November 1st, 2009 at 4:01 pm:

so http://www.font-face.com looks like they might have a really good service coming. I can’t wait to use @font-face regularly, easily and without hassle.
Pingback from 5 years of Firefox at hacks.mozilla.org on November 8th, 2009 at 9:50 pm:

[...] – super fast JavaScript, modern CSS, HTML5, support for the various web-apps standards, downloadable font support, offline application support, raw graphics through canvas and WebGL, native video, advanced XHR [...]
Pingback from @font-fa©e ! | jaiunblog.com | j'ai un blog - graphisme, design, programmation on November 11th, 2009 at 6:07 pm:

[...] vient de cette page (que je vous invite à lire) : http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ Mais si on RTFM un peu :) et qu’on connait le monde de la typo (des bisounours ?), la magie a [...]
Pingback from Achieve Cross-Browser @font-face Support : ColorTone on November 22nd, 2009 at 10:12 am:

[...] If it is, we don’t want to download the font over the network. There are two of them because Safari only supports the postscript font name, so when the postscript name differs from the normal name, you should include both. The next format [...]
Trisha wrote on November 22nd, 2009 at 3:35 pm:

I’ve been playing with this all day. Amazing. Graublau Sans is so nice. Thanks for a great explanation. I only used H1 tags because load times are lagging slightly. it wasnt supposed to be supported until firefox 3.6 and its working in 3.5 so maybe there will be improvements in rendering speed. Even with only an H1 tag change, My site never looked better, and so will my clients site. Praise firefox. Praise CSS3!
Pingback from Rex's blah blah blah » Firefox 3.6 的開放網頁字型格式 on December 1st, 2009 at 3:18 am:

[...] font-family 來指定一些擺在網路上 TrueType 或 OpenType 字型，直接讓流覽器繪出美麗的文字 (中文版: 顛覆網路 35 天 (4b): 以 @font-face 使用你喜歡的字體 by BobChao)。 [...]
Richard Fink wrote on December 18th, 2009 at 3:07 pm:

John,

I’m a bit confused about the need to use the Postscript name for local() to accomodate Safari on the Mac.
Are you saying this is peculiar to local() within an @font-face declaration? And has nothing to do with the way one would usually write the name in an ordinary font-family stack outside of @font-face?

Thanks, Rich
Richard Fink wrote on December 22nd, 2009 at 9:30 am:

@John

I’m trying to get to the bottom of your statement:

“Safari only supports PostScript name lookup under Mac OS X, so under Mac OS X Postscript names are also supported. For OpenType PS fonts (often labeled with an .otf extension) the full name is the same as the PostScript name under Windows. So for these fonts, authors are advised to include both the full name and the PostScript name for cross-platform interoperability. ”

Is this something peculiar to local() on Safari/Mac? I know of no restriction to Postscript names in specifying a font for Safari in an ordinary font stack on a page without any @font-face declarations:
font-family: “Lucida Grande”, Verdana, Arial, Sans-Serif;

I’m not the only one perplexed by this. Please explain.

Regards, Rich
Richard Fink wrote on December 22nd, 2009 at 11:43 am:

@John

I’m trying to get to the bottom of your statement:

“Safari only supports PostScript name lookup under Mac OS X, so under Mac OS X Postscript names are also supported. For OpenType PS fonts (often labeled with an .otf extension) the full name is the same as the PostScript name under Windows. So for these fonts, authors are advised to include both the full name and the PostScript name for cross-platform interoperability. ”

Is this something peculiar to local() on Safari/Mac? I know of no inability to specify a font using its full name for Safari in a typical font stack on a page without an @font-face declaration:

font-family: “Lucida Grande”, Verdana, Arial, Sans-Serif;

I’m not the only one perplexed by this. Please explain.

Regards, Rich
Pingback from Типография. Гигантский шаг в сети. Шрифты приходят на помощь брендам. > Брендинговое агентство Purebrand. Создание бренда. Разработка бренда. М on January 3rd, 2010 at 12:58 pm:

[...] http://craigmod.com/journal/font-face/ hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ [...]
Pingback from @font-face (firefox 3.5) « kravca.mu on January 5th, 2010 at 3:17 am:

[...] http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ [...]
Pingback from My Things in ‘09 | Indianapolis Museum of Art Blog on January 5th, 2010 at 12:22 pm:

[...] Web Design Moment – @font-face. Move over sIFR and Cufon… typography on the web is about to get totally [...]
Darrel Girardier wrote on January 7th, 2010 at 9:25 pm:

I can’t seem to get this work. It seems work fine on Safari but will not render out on Firefox 3.5 or 3.6. My site is http://blog.darrelgirardier.com the header and entry titles are supposed to use a font called Museo, the font can be found here http://www.josbuivenga.demon.nl/museo.html.

Can anyone help me out?
1. Trisha wrote on January 13th, 2010 at 8:15 pm:
  
  Darrel, did you try also changing the font in your h1 and h2 tags to the new font-family?
  1. Darrel Girardier wrote on January 13th, 2010 at 8:28 pm:
    
    Thanks.
    
    I figured it out. I think Firefox can be a little pick with the way the fonts are named. Once I reduced font to the parent name and didn’t break it down by weight it seemed to work.
Pingback from 精通 CSS 造型设计元素 | 芒果 on January 9th, 2010 at 12:40 am:

[...] Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程，以及如何在网页设计中插入 Truetype 字体。 [...]
Pingback from dBlogIt by Dustin Boston » I’m Having Fun With These Different Things on January 11th, 2010 at 12:58 pm:

[...] Web fonts, kudos [...]
Pingback from 精通CSS造型设计元素 on January 11th, 2010 at 11:05 pm:

[...] Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程，以及如何在网页设计中插入 Truetype 字体。 [...]
Pingback from Nettpilotene gets a makeover « Asgeir Hoem on January 14th, 2010 at 5:21 am:

[...] supported by Safari since 3.1, Firefox 3.5, and, without having tested, Opera. (There’s a good write-up on the @font-face rule at [...]
Pingback from Piękne czcionki? Używaj @font-face! « Wodospad kolorów on January 18th, 2010 at 1:23 am:

[...] http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ Czcionki: http://www.fontsquirrel.com [...]
Pingback from 精通 CSS 样式设计元素 - 菠菜博 on January 18th, 2010 at 8:06 am:

[...] Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程，以及如何在网页设计中插入 Truetype 字体。 [...]
Pingback from 精通 CSS 造型设计元素 Mastering CSS - E@生活在别处 on January 19th, 2010 at 7:10 pm:

[...] Styling Ordered Lists with CSS 使用 CSS 创建一个极具吸引力的有序列表。 Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程，以及如何在网页设计中插入 Truetype [...]
Pingback from Embed web page fonts using @font-face - Sky’s Blog on January 25th, 2010 at 10:19 am:

[...] Beautiful fonts with @font-face {hacks.mozilla.org} a thorough discussion to get you started [...]

« Previous 1 2 3 4 Next »

Comments are closed for this article.

hacks.mozilla.org Home

beautiful fonts with @font-face

177 comments

About the Author

John Daggett

Articles by Category