241
edits
Evangelism/Firefox3.5/35Days/Articles/@font-face: Difference between revisions
Evangelism/Firefox3.5/35Days/Articles/@font-face (view source)
Revision as of 08:46, 10 June 2009
, 10 June 2009added cross-site usage and font licensing descriptions
(add multiple weights example) |
(added cross-site usage and font licensing descriptions) |
||
| Line 85: | Line 85: | ||
[[File:Fontproperties.png|center|link=http://www.microsoft.com/typography/FreeToolsOverview.mspx| Font properties with Microsoft Font Extension installed]] | [[File:Fontproperties.png|center|link=http://www.microsoft.com/typography/FreeToolsOverview.mspx| Font properties with Microsoft Font Extension installed]] | ||
Safari only supports PostScript name lookup under Mac OS X, so under Mac OS X Postscript names are also supported. For OpenType PS fonts | 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 == | == Supporting Many Languages == | ||
| Line 102: | Line 102: | ||
- kerning/ligatures control | - kerning/ligatures control | ||
== 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 [http://www.w3.org/TR/access-control/ 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. | |||
<pre> | |||
# example Apache .htaccess file to add access control header | |||
<FilesMatch "\.(ttf|otf)$"> | |||
<IfModule mod_headers.c> | |||
Header set Access-Control-Allow-Origin "*" | |||
</IfModule> | |||
</FilesMatch> | |||
</pre> | |||
With this HTTP header enabled, any page can access the fonts on this site, not just pages from the same site. | |||
== Font licensing issues == | == 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, 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 no. 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 currently. 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, 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 In Internet Explorer == | ||
Font linking has been possible with Internet Explorer but only for linking to fonts in the prorietary EOT font format. The only way to create EOT fonts is to use the [http://www.microsoft.com/typography/WEFT.mspx 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 <code>font-family</code> and <code>src</code> descriptors within @font-face rules, so each family can only contain a single face. It doesn't understand <code>format()</code> hints will ignore any @font-face rule containing these hints. This behavior can be used enable font linking cross platform: | |||
<pre> | |||
/* 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"); | |||
} | |||
</pre> | |||
== Future Work == | |||
For Firefox 3.5, the [https://bugzilla.mozilla.org/show_bug.cgi?id=3512 <code>font-stretch</code>] and [https://bugzilla.mozilla.org/show_bug.cgi?id=475891 <code>unicode-range</code>] descriptors are not supported. [https://bugzilla.mozilla.org/show_bug.cgi?id=119490 Fonts defined in SVG documents] are also not supported yet. These are under consideration for inclusion in future releases. As always, patches welcome! | |||
== Further resources == | == Further resources == | ||