beautiful fonts with @font-face

This article is also available in Bulgarian.

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

Documentation

Examples

Font Resources

Font Politics

About Christopher Blizzard

Making the web better, one release at a time.

More articles by Christopher Blizzard…


177 comments

  1. […] you ever wanted to know about beautiful fonts with CSS’ @font-face: http://ur1.ca/5ikf (via @mozhacks) […]

    June 11th, 2009 at 08:54

  2. Al

    Fonts. About bloody time!!

    Awesome work, nicely explained… I am looking forward to using this stuff soon.

    June 11th, 2009 at 09:26

  3. Josef

    When we imagine that we’ll be able to do with we quckly understand that it will become essential.
    Great work!

    (ps : Sorry for my bad english I’m french ^^)

    June 11th, 2009 at 11:03

  4. Joe Clark

    You really haven’t addressed the fact that CSS weight definitions (bizarrely numeric) have no relation whatsoever, let alone a dependable authorial relation, to weights of actual typefaces.

    I thought it was cute you had to scour the entire world to find an open-source typeface with more than two weights. Because open-source fonts are the norm, after all.

    June 11th, 2009 at 11:39

  5. James John Malcolm

    Great article!

    FireFox 3.5 doesn’t seem to pick up on “font-variant:small-caps” though when adding the small-caps variant via @font-face, which is a shame.
    (So if you put that in last, all text will default to the small-caps variant!)

    When is that feature planned?

    June 11th, 2009 at 12:12

  6. Vladimir Dzhuvinov

    Does it work with XULRunner apps using chrome src URLs?

    June 11th, 2009 at 12:21

  7. John Daggett

    @Joe Clark:
    The weight system in CSS is based on OpenType. In general 400 maps to normal, 700 to bold, but for a given family it’s completely subjective. And completely under your control as an author, the weight listed (or implied) in an @font-face rule is completely under your control. And the fonts chosen here are highlighted because they are available for use with @font-face.

    @James John Malcolm
    In general, most browsers don’t implement small caps *matching*, only “fake” small caps by swizzling around the font size. OpenType fonts implement the ability to define small caps as a variant, treating font-variant as a rendering property rather than a face selection property seems to be make sense. Although font designers do seem to still ship separate small caps faces (e.g. Axel), so it may be worth considering this addition in the future.

    June 11th, 2009 at 14:02

  8. Alex

    Great article, cleared up a question or two I had (about local face matching via the name)

    One unfortunate thing is that Microsoft’s font properties extension is 32Bit only, leaving 64Bit users (like myself) out in the cold.

    June 11th, 2009 at 21:13

  9. Dave Crossland

    http://code.google.com/p/ttf2eot/ is a GPL EOT (de)converter, so when you say “The only way to create EOT fonts is to use the Microsoft WEFT tool, available only on Windows.” that is no longer true :-)

    June 12th, 2009 at 03:02

  10. Edgar Leijs

    Dear browser builders,

    Please please please implement all the CSS3 you can get. That will make the world much much better, and beautiful! Especially @font-face because it’s the feature we are all waiting for years now. Only thing to solve is the legal issue about fonts…

    Thanks for the article!

    June 12th, 2009 at 03:50

  11. Al

    Sometimes I wonder if there should be some kind of charity/publi-non-profit group that can fight for web standards, that are not already browser vendors or the W3C. There’s a giant hole in the web called “formats” and it’s leaking a lot of creativity.

    June 12th, 2009 at 04:40

  12. John Daggett

    @Alex:
    The other option is FontTools/TTX, it’s a bunch of Python scripts for dumping out font data. http://sourceforge.net/projects/fonttools/

    ttx -t name font.ttf

    June 12th, 2009 at 04:54

  13. James John Malcolm

    @John Daggett:
    Exactly, it’s extremely handy for fonts which have a seperate small-caps version. (Such as Fontin Sans[1], which I used on Standards.next)
    Webkit does already have support for font-variant:small-caps, although it doesn’t imply “font-weight:normal” or “font-style:normal” seemingly…

    [1] http://www.exljbris.nl/ -> Fontin Sans
    [2] http://standards-next.org/

    June 12th, 2009 at 05:00

  14. Richard Fink

    @john
    Thanks for the info and the fine work you’ve done. Truly.
    In line with discussing @font-face, there is a new and serious proposal regarding a web-specific file format on the table:
    The Proposal
    Discussion Of New Web Fonts Proposal on Typophile
    In-Depth Analysis: Apple and Microsoft In Talks On Web Font Protections

    I’d love to know your thoughts on the matter.

    June 12th, 2009 at 11:43

  15. […] 原文地址:beautiful fonts with @font-face […]

    June 12th, 2009 at 23:10

  16. John Daggett

    @Richard Fink
    I saw the Ascender proposal, I think it’s part of a larger discussion related to the whole font ecosystem. The @font-face mechanism is just one step that enables wider use of typographically rich fonts on the web. A lot more thought needs to occur related to the business model for font vendors (e.g. direct sale of fonts or server-based models like Typekit), ways of making licensing more understandable and accessible by mere mortals, and how to make better use of the available features in fonts.

    June 13th, 2009 at 17:43

  17. […] button is rendered with its own font, declared using @font-face. Example: @font-face { font-family: Brock Script; src: url("BrockScript.ttf"); […]

    June 13th, 2009 at 21:25

  18. Chris Davies

    It is nice to see this in Firefox and other browsers. What is disappointing is that no one seems to implement web fonts when printing. This seems a large feature gap that no one seems to be addressing.

    June 14th, 2009 at 10:34

  19. […] beautiful fonts with @font-face […]

    June 15th, 2009 at 02:22

  20. […] font normally not installed on your computer. This is accomplished by using the @font-face CSS tag, described in detail over at hacks.mozilla.org. I’m now using the font GrauBlau Sans Web from the nice people over […]

    June 16th, 2009 at 17:56

  21. Nicolas Mailhot

    @John Daggett

    1. « Most font families today consist of only four faces: »

    This is platform-dependant. The default font family under Linux is usually DejaVu Sans, and it has included more for a long time.

    Modern font faces allow variants along the weight (normal/bold/heavy…) width (normal/condensed/expanded) slant (normal/oblique/italic axis). Sadly Firefox still does not support the slant operator

    2. Your Helvetica Neue / MgOpenModerna pattern is a perfect example why @font-face will likely lead to more web breakage: the CSS is advertising Helvetica Neue, but downloading MgOpenModerna, so even if a recent up-to-date MgOpenModerna is available on system it will waste resources fetching a (likely obsolete) MgOpenModerna from the web.

    @James John Malcolm

    Making small caps a variant is contrary to WWS font naming specifications, please do not advocate it.

    June 17th, 2009 at 08:17

  22. Nicolas Mailhot

    « Sadly Firefox still does not support the slant operator »

    sorry I meant width here

    https://bugzilla.mozilla.org/show_bug.cgi?id=3512

    June 17th, 2009 at 08:20

  23. James John Malcolm

    @Nicolas

    Please don’t confuse the practices of the WWS font naming specification with practices CSS should adopt to make styling websites as easy for developers as possible. Adding “font-variant:small-caps;” to the list of declarations is the method CSS in use today to obtain text in Small Caps of the font in use. It would be beyond silly to use another method for @font-face (and not to mention increase the possibility for renderer bugs).

    And stop telling people what to advocate or not.

    June 17th, 2009 at 11:36

  24. Kaida

    I’m running Firefox 3.5 Beta 4 on Fedora (Linux) and am not getting any of the fonts to show in your examples. They flicker briefly and then are replaced by boxes with numbers in them, like when I don’t have a Unicode font installed.

    Interestingly the fonts are supported in Midori (a webkit based browser).

    June 17th, 2009 at 23:57

  25. Ombre

    Great post.

    It seems that font-face doesn’t work wit the media print. With Safari this is OK.

    June 18th, 2009 at 04:35

  26. Richard Fink

    @John Daggett

    It occurred to me after your reply to my previous post that my ceaseless harping on issues regarding @font-face may have been bad form and a simple “Congrats, Great work!” would have sufficed.
    I left this comment for Robert Callahan:
    >@robert,
    >If you’re still monitoring this thread…
    >In retrospect I’m very glad font-linking was implemented in FF 3.5.
    >It’s clear to me now that the only way forward was to just do it >and get beyond talking.
    >In a year or two, we’ll all have a much better idea of whether >@font-face needs refinement based on results in the real world.
    >Thanks for your fine work. FF3.5 looks great.

    And then, I read David Baron’s thoughts and found a more sober, reflective thinking going on than (I think) I did last year in the rush of development.
    A more informed and constructive debate and analysis is going on among font-vendors, as well.

    Wishing you a smooth release of 3.5.

    Richard Fink

    June 18th, 2009 at 09:16

  27. […] beautiful fonts with @font-face […]

    June 19th, 2009 at 23:34

  28. John Daggett

    @Richard Fink

    Thanks!

    June 21st, 2009 at 17:54

  29. […] the technical side, this page also features 3.5’s new @font-face capabilities, serving up some slick comic booky text as real HTML text rather than a clunky graphic. The robot […]

    June 21st, 2009 at 21:43

  30. […] beautiful fonts with @font-face […]

    June 29th, 2009 at 17:57

  31. […] und nur wenn dieser nicht vorhanden ist, will man einen Download anbieten. Geht auch, wie man bei John Dagget nachlesen kann, mit der Eigenschaft […]

    June 30th, 2009 at 00:46

  32. Michael Montgomery

    Thank you!!
    Congratulations, and great work.

    June 30th, 2009 at 06:40

  33. […] En cuanto a CSS también incorpora bastantes nuevas funcionalidades, como por ejemplo la posibilidad de integrar las fuentes – @font-face – y lograr así que la web se presente al usuario tal y como la concibió el diseñador sin tener que depender de las fuentes estandarizadas. Sin lugar a dudas lo agradecerán los diseñadores que veían capadas sus capacidades creativas. Ejemplo de uso de font-face. […]

    June 30th, 2009 at 11:30

  34. […] Reason #6 – Web Fonts. Firefox 3.5 adds support for web fonts. This means that CSS files can now declare and download on demand new fonts. Fonts and typography have played an important role for printed newspaper and magazine and we see them play a very important role in the future of feedly (specially as we start adding support for skins). Learn more about web fonts and @font-face. […]

    June 30th, 2009 at 12:15

  35. […] beautiful fonts with @font-face at hacks.mozilla.orghacks.mozilla.org […]

    June 30th, 2009 at 12:25

  36. Gérard Talbot

    @ John Daggett,

    Regarding
    font-family: Graublau Sans Web;
    and
    font-family: Graublau Sans Web, Lucida Grande, sans-serif;

    “Font names containing any such characters or white space should be quoted”
    CSS 2.1, section 15.3 Font family: the ‘font-family’ property
    http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

    regards, Gérard

    June 30th, 2009 at 22:52

  37. marlwin

    The only thing that I regret is that you can’t specify a size for each variant (listed in font:). So if the browser does not support @font-face, the user may end with a font bigger or smaller than wanted.

    But maybe there is a tip for that ?

    July 1st, 2009 at 04:35

  38. John Daggett

    @Gérard Talbot

    Right, quotes are required when you use a font with a family name that contains quotes, semi-colon’s, etc., as listed in the section you reference. But *not* spaces.

    @marlwin

    Use font-size-adjust?

    http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

    July 1st, 2009 at 19:35

  39. […] page is an example with what you can do with Firefox 3.5’s support of @font-face. Wonderful, isn’t it? […]

    July 2nd, 2009 at 10:18

  40. […] […]

    July 3rd, 2009 at 06:55

  41. […] Mozilla’s John Daggett explains: 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. […]

    July 3rd, 2009 at 11:03

  42. […] beautiful fonts with @font-face at hacks.mozilla.org […]

    July 3rd, 2009 at 13:10

  43. Mr. Fussyfont

    John Daggett,

    Thanks, this is very educational. I was just reading the W3C document and came across this:

    “The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same irregardless of the font used.”

    I don’t know if you wrote this, but “irregardless” is not a word. It’s “regardless”.

    While I’m at it, James John Malcolm, it’s “sepArate” not “sepErate” and the word “which” should be replaced with “that” in this sentence:

    “Exactly, it’s extremely handy for fonts which have a seperate small-caps version”

    Sorry to be so anal, but if even one person’s grammar or spelling improves as a result of this comment, it will have been worth it!

    July 3rd, 2009 at 13:27

  44. […] Mozilla’s John Daggett explains: 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. […]

    July 3rd, 2009 at 16:49

  45. […] detail: “Mozilla’s John Daggett explains: Within a stylesheet, each @font-face rule defines a family name to be used, the font […]

    July 4th, 2009 at 06:42

  46. Koolwriting

    Can we use “@font-face” inline? For example, if you just want one crazy symbol out of wingdings.

    July 4th, 2009 at 08:09

  47. […] detail: “Mozilla’s John Daggett explains: Within a stylesheet, each @font-face rule defines a family name to be used, the font […]

    July 4th, 2009 at 08:15

  48. Steve

    Now if we can only get IE to drop EOT in favor of TTF/OTF, we can actually implement this for all users!

    And keep the free, embeddable fonts coming!!

    July 4th, 2009 at 20:50

  49. […] Mozilla’s John Daggett explains: 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. […]

    July 4th, 2009 at 21:59

  50. Jens Wedin

    Does anyone have a clue how to convert a OTF file into a EOT file?

    July 6th, 2009 at 00:10

  51. […] you’re interested in a longer, more detailed discussion of @font-face, check out this post on Mozilla Hacks. newsletterPromo(”Technology”, […]

    July 6th, 2009 at 13:47

  52. […] you’re interested in a longer, more detailed discussion of @font-face, check out this post on Mozilla […]

    July 6th, 2009 at 15:07

  53. […] the original: beautiful fonts with @font-face at hacks.mozilla.org Tags: Comments0 Leave a Reply Click here to cancel […]

    July 6th, 2009 at 16:48

  54. John Daggett

    @fussyfont
    Thanks for the edit! Feel free to post other things you find to the www-style mailing list, that’s the best place for editorial comments.

    @jens wedin
    No, the Windows embedding API which supports EOT does not currently support .otf (Postscript CFF) fonts. That’s also why you can’t embed these fonts in Word documents.

    July 6th, 2009 at 21:32

  55. James John Malcolm

    @Jens Wedin
    There is a way to covert OTF to EOT, just not directly. Fontforge[1] can convert OTF to TTF, and TTF2EOT[2] can (surprise, surprise!) convert TTF to EOT (only seems to work under Linux for now).
    Haven’t got Fontforge to correctly convert anything for myself yet, but it should definitely be possible.

    @Mr. Fussyfont
    Gee thanks. Come here and let me wri..uhm, thank you. It’ll be worth it!

    [1] http://fontforge.sourceforge.net/
    [2] http://code.google.com/p/ttf2eot/

    July 7th, 2009 at 02:27

  56. […] you’re interested in a longer, more detailed discussion of @font-face, check out this post on Mozilla […]

    July 7th, 2009 at 08:24

  57. Jens Wedin

    Hi and thanks for reply!
    I did some testing a research to see if I could get the an EOT file from an OTF file and this is what I did.

    1. Get the OTF file
    2. Convert the file at http://onlinefontconverter.com/
    3. Download it and install in in Windows fonts folder
    4. Run WEFT (I have mac so I run ut under Paralels)
    5. Follow the instructions from this site, http://www.spoono.com/html/tutorials/tutorial.php?id=19
    6. Make the changes to your css file and upload the eot file to the webserver.
    7. Check out the nice result :)

    Here is how it looks for my site in a bunch of browsers

    http://yfrog.com/5dnfep

    Cheers,
    Jens

    July 8th, 2009 at 02:29

  58. […] beautiful fonts with @font-face […]

    July 8th, 2009 at 07:12

  59. […] е от статията Beautiful fonts with @font-face. В нея можете да намерите и други съвети относно […]

    July 8th, 2009 at 15:15

  60. Dave Crossland

    I’ve documented how to relax CORS restrictions at http://openfontlibrary.org/wiki/Web_Font_linking_and_Cross-Origin_Resource_Sharing

    July 8th, 2009 at 15:41

  61. […] show off the web fonts capability of FireFox 3.5, font design company Underware created some special glyph-limited editions of their […]

    July 9th, 2009 at 09:32

  62. letscounthedays

    With CSS3 and the continued development for Firefox, Safari, and Chrome its only a matter of time before we will all be able to use custom fonts within our websites. Other than a few licensing issue and Internet Explore being dead weight the time should be here sooner than later.

    Very good article, thank you!

    July 10th, 2009 at 12:28

  63. […] the release of Firefox 3.5, I decided to look into using embedded fonts. In the past, web designers have mostly been limited to the fonts pre-installed on most […]

    July 12th, 2009 at 12:16

  64. […] 原文地址:beautiful fonts with @font-face […]

    July 13th, 2009 at 19:21

  65. […] to “embed” fonts on their web-pages. And I’m a bit late on this, but it has found its way into the newest release of Firefox as well. The example rendered perfectly on version 3.5 using the […]

    July 16th, 2009 at 11:47

  66. skierpage

    I have the same question as Koolwriting, is there a way to do this using inline style=”font stuff here” on an HTML element? Blogger won’t let me put a script block in a post. :-( If I put the @font-face in a style attribute, Firefox 3.6a1pre Error Console complains “Warning: Expected declaration but found ‘@font-face'”

    July 16th, 2009 at 17:48

  67. […] Beautiful fonts with @font-face a super tutorial with plenty of linked resources. […]

    July 18th, 2009 at 07:39

  68. […] the use of new fonts as a native capability of web designers. The potential is just immense– designers will no longer be captive to the likes of Verdana, Georgia, Arial, and Tahoma, work-arounds such as image replacement […]

    July 20th, 2009 at 04:35

  69. John Daggett

    @skierpage

    No, @font-face rules can’t be defined via style attribute settings.

    July 20th, 2009 at 15:48

  70. […] first reason, and more important of the two, is that I wanted to experiment with the new @font-face support in Firefox 3.5. I have a strongly held point of view that you don’t really learn about […]

    July 27th, 2009 at 18:13

  71. […] beautiful fonts with @font-face […]

    July 27th, 2009 at 20:27

  72. […] trouverez des informations plus complètes dans cet excellent article. […]

    July 28th, 2009 at 07:43

  73. […] beautiful fonts with @font-faceFirefox 3.5 unterstützt dank eines neuen CSS Tags font-face nun eigens eingebundene Schriftarten […]

    August 2nd, 2009 at 11:44

  74. […] beautiful fonts with @font-face […]

    August 2nd, 2009 at 21:46

  75. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 3rd, 2009 at 02:51

  76. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 3rd, 2009 at 06:04

  77. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 3rd, 2009 at 16:16

  78. […] beautiful fonts with @font-face at hacks.mozilla.org (tags: css typography fonts webdesign @font-face css3) […]

    August 3rd, 2009 at 17:36

  79. […] beautiful fonts with @font-face […]

    August 3rd, 2009 at 20:13

  80. Bradford Sherrill

    Great article, I can’t wait for the modern browsers to be more saturated so we can use CSS3! Its very tempting to start using them fully.

    August 4th, 2009 at 08:58

  81. Aric Bills

    My excitement for Firefox’s support of @font-face is tempered by the fact that Firefox seems unable to display beautiful fonts beautifully. Compare the following screenshots of the Gentium sample text, all made from openSUSE 11.0:

    Firefox 3.5.2: http://static.zooomr.com/images/7931158_b05f09ffb8_o.png
    Epiphany 2.22.1.1: http://static.zooomr.com/images/7931142_a2ad0d7e1f_o.png
    Konqueror 4.0.4: http://static.zooomr.com/images/7931167_a0b8f3269c_o.png
    Opera 9.6.4: http://static.zooomr.com/images/7931181_c13e043ea0_o.png

    Gentium is installed on my machine, and every browser seems to render it fine–except Firefox. This font rendering problem is not limited to Gentium; many fonts display fine in other browsers but terribly in Firefox. I get similar results in my Windows Firefox (3.0.12). I’m a big fan of Firefox but I can’t understand why it struggles with font rendering when every other browser seems to have it figured out. What gives?

    August 8th, 2009 at 12:49

  82. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 8th, 2009 at 15:52

  83. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 10th, 2009 at 04:51

  84. […] months). Things still do visually look a little different across browser implementations, but they currently work cross-browser and with fixes like forcing Cleartype on for web fonts in Firefox, render quality is improving […]

    August 10th, 2009 at 06:28

  85. […] months). Things still do visually look a little different across browser implementations, but they currently work cross-browser and with fixes like forcing Cleartype on for web fonts in Firefox, render quality is improving […]

    August 11th, 2009 at 09:01

  86. […] of Web Typography is probably for the hard-core typography geek. Do as the authors say and read John Daggett’s primer about @font-face first. Then read about the potential of web typography. As they say, “fine typography has […]

    August 12th, 2009 at 05:40

  87. […] are several methods/technologies that allow you to essentially embed uncommon fonts on your site. Beautiful fonts with @font-face is a good summary of the potential for straight CSS-level font embeds; although there are legal […]

    August 14th, 2009 at 09:02

  88. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 14th, 2009 at 11:04

  89. […] Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程,以及如何在网页设计中插入 Truetype 字体。 […]

    August 15th, 2009 at 04:33

  90. Jens Wedin

    @Aric, could it be because of the font? When I look at a testpage I did on my own it looks ok in Firefox, have a look below and tell us how it look.

    http://jenswedin.com/

    /Jens

    August 17th, 2009 at 23:36

  91. Aric Bills

    @Jens, thanks for your reply. Below is a screenshot of your webpage rendered in Firefox 3.5.2 on my system:

    http://static.zooomr.com/images/7986522_4fefeecee8_o.png

    And here it is rendered in Konqueror 4.0.4:

    http://static.zooomr.com/images/7986619_6cdf870877_o.png

    The rendering in Firefox is not bad (it’s downright beautiful compared to the Gentium italics), although I do prefer the Konqueror rendering–compare the bowls of the “e” and kerning within the word “posted”. My problem is that I am a linguist working with Native American languages, which use uncommon accented letters such as a circumflex over the letter x or a dot below a barred l. I would like to use @font-face to make my linguistic data accessible to the Native community, but I will need to use a font (like Gentium) that supports these uncommon diacritics; so for me, simply switching to a more “renderable” font like Museo may not be a possibility.

    I think the issue I am running into is that Firefox doesn’t respect my system preferences regarding antialiasing (system is set to antialias, but Firefox doesn’t do any antialiasing). All other browsers I have tested, whether based on KDE or Gnome, honor the system antialiasing setting.

    I’m not sure whether this problem stems from the Firefox source code itself, from the way the particular executable I’m using was compiled, from some Firefox-specific settings I’m unaware of, or from some other reason. I do notice similarly bad rendering in Firefox for Windows, but that may or may not be the same issue. If anyone has any insights into the source of this problem and/or ways to resolve it, I would love to hear from you.

    Jens, thanks again for your response.

    -Aric

    August 18th, 2009 at 02:19

  92. Karl Tomlinson

    @Aric, comparing your screenshots, it looks like Firefox is using hintstyle:hintfull and rgba:rgb, whereas the other applications are using something like hintstyle:hintslight and rgba:none. Not all applications always respect fontconfig rules, which may explain the difference.

    Firefox will use screen settings, and let fontconfig rules tweak these.
    Check ~/.fonts.conf and files in /etc/fonts/conf.d to see if hintfull or rgba values are replaced there.

    The main problem I see here is that the native hinter is not producing good results with Gentium Italic. This may be because the hint instructions in the font are not so good.

    Fontconfig rules can be used for setting preferred behaviour for particular fonts. For example, the following lines will force use of the FreeType’s auto-hinter (if hinting), which does a better job for this font, without turning off hinting instructions from fonts with better instructions:

     <match target="font" >
      <test name="fullname" >
       <string>Gentium Italic</string>
      </test>
      <edit name="autohint" >
       <bool>true</bool>
      </edit>
     </match>
    
    August 18th, 2009 at 23:29

  93. […] beautiful fonts with @font-face […]

    August 19th, 2009 at 00:54

  94. John Daggett

    @Aric Bills

    I’m sure there are ways of tweaking this on your system as Karl suggests but I think this is a bug if other browsers don’t suffer the same problem. I’ve logged this in bugzilla:

    https://bugzilla.mozilla.org/show_bug.cgi?id=511556

    You can add yourself to the CC list to track and make follow-on comments there.

    August 19th, 2009 at 17:50

  95. John Daggett

    @Aric Bills

    Just to clarify, the screenshots you posted are using the Gentium downloadable fonts example? Opera 9.5 doesn’t support downloadable fonts so I think you must be testing with Opera 10 beta perhaps? Or using a similar test with Gentium and Gentium Italic installed locally?

    August 19th, 2009 at 18:58

  96. Aric Bills

    @Karl, thanks for your help. Does this mean that Firefox is honoring my settings while all other browsers are not? In any case, I was able to adjust ~/.fonts.conf to rgba:none, hintstyle:hintslight and achieve the same font rendering in Firefox as in the other browsers. It’s also helpful to know that I can make adjustments on a per-font basis.

    @John, thanks for filing the bug report. If it is just a bug and easily fixable, that would be a great relief to me.

    August 20th, 2009 at 00:05

  97. Aric Bills

    @John, I have Gentium and Gentium Italic installed locally. The screenshots are all of the same URL (http://people.mozilla.org/~jdaggett/demos/multiplefaces.html), but as far as I know only Firefox is downloading the font as directed in the CSS.

    Out of curiosity, which operating system did you use to render the examples in the article?

    August 20th, 2009 at 10:16

  98. Chris

    For some reason, all of the examples work fine for me except for the Gentium one–it seems to be rendering in Times New Roman. Any reason why this might be the case?

    August 21st, 2009 at 11:38

  99. John Daggett

    All the examples were done on Mac OS X 10.5 except for the composite example which was also done on Windows XP and Ubuntu 9.

    @Chris
    If it’s not working for you, could you file a bug with the details need to reproduce the problem, especially OS version. There’s a known problem with Gentium on Windows 7, Microsoft introduced a restriction on fonts with license data larger than 5K and this affects Gentium. If they don’t rework their “fix” we’ll have to workaround that problem.

    August 23rd, 2009 at 19:45

  100. […] 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: […]

    August 30th, 2009 at 12:23

  101. […] 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: […]

    August 30th, 2009 at 15:03

  102. […] beautiful fonts with @font-face […]

    August 31st, 2009 at 03:59

  103. […] beautiful fonts with @font-face […]

    September 2nd, 2009 at 09:08

  104. […] can read more about web fonts at Mozilla Hacks, and see them in action at Speed Force (font […]

    September 2nd, 2009 at 11:24

  105. […] 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 […]

    September 10th, 2009 at 05:26

  106. […] 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. […]

    September 11th, 2009 at 13:55

  107. […] 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. […]

    September 11th, 2009 at 14:01

  108. […] 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. […]

    September 12th, 2009 at 16:34

  109. […] 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: […]

    September 15th, 2009 at 07:10

  110. […] * 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/ […]

    September 15th, 2009 at 12:20

  111. […] Beautiful fonts with @font-face […]

    September 17th, 2009 at 08:00

  112. […] beautiful fonts with @font-face […]

    September 18th, 2009 at 10:41

  113. […] 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. […]

    September 18th, 2009 at 13:06

  114. Sébastien Méric

    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

    September 18th, 2009 at 18:17

  115. […] 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 […]

    September 27th, 2009 at 18:59

  116. 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…

    October 1st, 2009 at 10:17

  117. 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…

    October 1st, 2009 at 11:07

  118. G Nelson

    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?

    October 8th, 2009 at 04:49

  119. […] 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 […]

    October 12th, 2009 at 10:17

  120. Christopher Blizzard

    @G Nelson – keep in touch, we’ll have some stuff to talk about soon. :)

    October 12th, 2009 at 23:14

  121. James John Malcolm

    @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!

    October 13th, 2009 at 02:16

  122. John Daggett

    @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).

    October 13th, 2009 at 05:11

  123. […] 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 […]

    October 20th, 2009 at 09:01

  124. […] beautiful fonts with @font-face […]

    October 24th, 2009 at 08:06

  125. […] http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ […]

    October 26th, 2009 at 07:02

  126. […] Beautiful Fonts With @font-face […]

    October 26th, 2009 at 08:42

  127. […] 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 […]

    October 26th, 2009 at 18:03

  128. […] http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ (detaylı) […]

    October 29th, 2009 at 10:16

  129. […] a good (and indispensable) article about how to use the font-face css rule to use any of these awesome free […]

    October 29th, 2009 at 14:25

  130. rob

    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.

    November 1st, 2009 at 16:01

  131. […] – 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 […]

    November 8th, 2009 at 21:50

  132. […] 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 […]

    November 11th, 2009 at 18:07

  133. […] 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 […]

    November 22nd, 2009 at 10:12

  134. Trisha

    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!

    November 22nd, 2009 at 15:35

  135. […] font-family 來指定一些擺在網路上 TrueType 或 OpenType 字型,直接讓流覽器繪出美麗的文字 (中文版: 顛覆網路 35 天 (4b): 以 @font-face 使用你喜歡的字體 by BobChao)。 […]

    December 1st, 2009 at 03:18

  136. Richard Fink

    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

    December 18th, 2009 at 15:07

  137. Richard Fink

    @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

    December 22nd, 2009 at 09:30

  138. Richard Fink

    @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

    December 22nd, 2009 at 11:43

  139. […] http://craigmod.com/journal/font-face/ hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ […]

    January 3rd, 2010 at 12:58

  140. […] http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ […]

    January 5th, 2010 at 03:17

  141. […] Web Design Moment – @font-face. Move over sIFR and Cufon… typography on the web is about to get totally […]

    January 5th, 2010 at 12:22

  142. Darrel Girardier

    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?

    January 7th, 2010 at 21:25

    1. Trisha

      Darrel, did you try also changing the font in your h1 and h2 tags to the new font-family?

      January 13th, 2010 at 20:15

      1. Darrel Girardier

        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.

        January 13th, 2010 at 20:28

  143. […] Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程,以及如何在网页设计中插入 Truetype 字体。 […]

    January 9th, 2010 at 00:40

  144. […] Web fonts, kudos […]

    January 11th, 2010 at 12:58

  145. […] Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程,以及如何在网页设计中插入 Truetype 字体。 […]

    January 11th, 2010 at 23:05

  146. […] 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 […]

    January 14th, 2010 at 05:21

  147. […] http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ Czcionki: http://www.fontsquirrel.com […]

    January 18th, 2010 at 01:23

  148. […] Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程,以及如何在网页设计中插入 Truetype 字体。 […]

    January 18th, 2010 at 08:06

  149. […] Styling Ordered Lists with CSS 使用 CSS 创建一个极具吸引力的有序列表。 Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程,以及如何在网页设计中插入 Truetype […]

    January 19th, 2010 at 19:10

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

    January 25th, 2010 at 10:19

  151. […] Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程,以及如何在网页设计中插入 Truetype 字体。 […]

    January 28th, 2010 at 00:13

  152. […] fonts 각 버튼들은 @font-face를 사용하여 선언된 고유 폰트로 렌더링할 수 있습니다. 예를 들면 다음과 […]

    April 20th, 2010 at 02:58

  153. […] […]

    May 16th, 2010 at 08:08

  154. Jared Stein

    .htaccess header ftw! Thanks for sharing that.

    May 24th, 2010 at 11:33

  155. Webstandard-Blog

    Very nice, but the best thing on it is the growing support of that feature by all the (important) browsers

    June 7th, 2010 at 00:11

  156. […] des fontes.  Les fontes étant libres, on peut aussi les utiliser sur son serveur de façon traditionnelle. Bonjour. Je m’appelle Inigo Montoya. Vous avez tué mon père. Préparez-vous à […]

    June 21st, 2010 at 02:16

  157. Jane

    Great trick to add fonts, will give it try, thanks for sharing!

    July 5th, 2010 at 00:12

  158. Nelson

    Very useful article. Especially the IE part!

    Thank you!

    August 4th, 2010 at 16:58

  159. malaysia wec meet up

    Every now and again designers stumble upon the very same problem: the choice of a unique and beautiful typeface which manages to fulfill three basic tasks. Support the corporate identity, enrich the visual appearance and is compatible with the overall design. However, usually there are simply too many options you can consider, which is why you need time to find the option you are most comfortable with. Although the choice usually depends on clients’ requirements, it is necessary to have some pretty starting points for your font decision.

    September 23rd, 2010 at 22:18

  160. the frozen boy

    Do you know that Firefox 3.5 only allows fonts to be loaded for pages served from the same site. This is actually a drawback.

    October 28th, 2010 at 03:05

  161. Anas

    Thank you for this great info, What you are saying that Firefox 3.5 and up can render arabic text correctly under Mac OS X, but it’s not, I tried your example on FF3.6.13 any OS is Mac OS X 10.6.6.
    FireFox renders the text with default font, it doesn’t render it correctly.

    Your example words only on Firefox 4.
    if you have any tips any idea, how to apply font-face for arabic text on FF3.5 I’ll be grateful.
    regards

    January 21st, 2011 at 06:12

  162. Harv

    I’m having a problem displaying @font-face in Firefox on pages with SSL. All other browsers render it properly. When I change the path to the fonts in the stylesheet to absolute and use https://www… @font-face fails throughout the site on all browsers.

    Any ideas what could be causing this? Mixed content issue?

    March 30th, 2011 at 10:08

  163. nikeairus

    Thank you for your sharing make me learn more about the fonts.I want to beautiful fonts.

    April 14th, 2011 at 22:57

  164. Jakykong

    I thought I would add that, running under Linux at least, there is the mkeot command, available in the eot-utils package. Microsoft’s tool isn’t the only one on the market any more :).

    May 30th, 2011 at 02:52

  165. […] Beautiful fonts with font face […]

    June 9th, 2011 at 04:29

  166. […] Beautiful fonts with font face […]

    June 26th, 2011 at 09:33

  167. […] 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 […]

    July 5th, 2011 at 19:37

  168. […] […]

    July 20th, 2011 at 22:40

  169. Emisy

    However, usually there are simply too many options you can consider, which is why you need time to find the option you are most comfortable with.Very nice, but the best thing on it is the growing support …

    August 3rd, 2011 at 02:46

  170. […] beautiful fonts with @font-face […]

    August 23rd, 2011 at 14:34

  171. Devve Knulle

    THANK YOU for this, helps when using the Web Developer Extension, my web fonts weren’t appearing when I went to “Edit CSS”, using the local method made them appear.

    August 26th, 2011 at 12:09

  172. Lisa

    Anyone managed to solve the issue with @fontface on Firefox with ssl?

    August 31st, 2011 at 12:12

  173. […] http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ Back Matter […]

    September 12th, 2011 at 12:05

  174. Incisive Point Interactive

    I try it but sometimes it’s not works in slow connection. I think the font file is not loaded.

    November 25th, 2011 at 11:00

  175. Ryan

    thanks for the in depth info. the fontsquirrel generator worked like a charm!

    September 5th, 2012 at 23:37

Comments are closed for this article.