Comparison of layout engines (Web Typography)

{{see also | Web typography}}
The following tables compare support for different [[Web typography#File formats|font formats]] and support for CSS3 font resources for a number of layout engines. [[Web typography#Web fonts|Web fonts]] were initially defined (but later dropped) from CSS2, then added into CSS3. The specification is supported by an increasing number of web browsers.<ref>{{citation |url=http://randsco.com/index.php/2009/07/04/p680 |title=Cross Browser Font Embedding with the CSS3 @font-face selector |date=2009-07-04 |publisher=Randsco |last=Kimler |first=Scott}}</ref><ref>{{citation |url=http://webfonts.info/wiki/index.php?title=%40font-face_browser_support |title=@font-face browser support}}</ref>

{{Explanation of the tables}}
{{Explanation of the tables2}}

==Support for CSS font resources==
{{see also|Comparison of layout engines (Cascading Style Sheets)}}
CSS3 specified a mechanism for downloading and displaying fonts within a web page.<ref group="spec">{{citation |url=http://www.w3.org/TR/css3-fonts/#font-resources |title=CSS Fonts Module Level 3 - Font resources |publisher=W3C}}</ref> This table compare support for that mechanism.
{| style="text-align: center; width: 95%;" | class="wikitable"
! colspan="2" |
! style="width: 15%;" | [[Trident (layout engine)|Trident]]<ref group="t" name="trident-font-face">{{citation |url=http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx |title=AbOUT Font Embedding |publisher=Microsoft}}</ref>
! style="width: 15%;" | [[Gecko (layout engine)|Gecko]]<ref group="g">{{citation |url=https://developer.mozilla.org/en/CSS/@font-face |title=@font-face |publisher=Mozilla}}</ref>
! style="width: 15%;" | [[Webkit]]<ref group="w">{{citation |url=http://webkit.org/blog/124/downloadable-fonts/ |title=Downloadable Fonts |publisher=Apple |last=Hyatt |first=Dave |date=2007-10-03}}</ref>
! style="width: 15%;" | [[Presto (layout engine)|Presto]]<ref group="p">{{citation |url=http://dev.opera.com/articles/view/presto-2-2-and-opera-10-a-first-look/ |title=Opera Presto 2.2 and Opera 10 — a first look |publisher=Opera |last=Mills |first=Chris |date=2008-12-04}}</ref><ref group="p">{{citation |url=http://dev.opera.com/articles/view/seven-web-fonts-showcases/ |title=Seven Web Fonts showcases |date=2009-09-01 |publisher=Opera}}</ref>
|-
! colspan="7" | Grammar and rules
|-
! CSS3
! <code>@font-face</code>
| {{yes|4.0}}
| {{yes|1.9.1}}
| {{yes|525}}{{#tag:ref | Prior to version 4.0, [[Google Chrome]] had font support disabled.<ref group="w">{{citation |url=http://code.google.com/p/chromium/issues/detail?id=9633 |title=Issue 9633: Disable web fonts by default |publisher=Google |date=2009-04-01}}</ref><ref group="w">{{citation |url=http://groups.google.com/group/chromium-dev/browse_thread/thread/c3b3db4339d3642c/c0040c5d39cfa1db?pli=1 |title=Full pass of acid3 - Chromium-dev |publisher=Google |date=2009-07-03}}</ref><ref group="w">{{citation |url=http://code.google.com/p/chromium/issues/detail?id=17818 |title=Issue 17818: Enabled dynamic / web font support in a secure manner |publisher=Google |date=2009-07-27}}</ref><ref group="w">{{citation |url=http://paulirish.com/2009/chrome-and-font-face-a-summary/ |title=Chrome and @font-face: It's here! |date=2010-01-25 |last=Irish |first=Paul}}</ref> | group=note}}
| {{yes|2.2}}
|-
! colspan="7" | Descriptors
|-
! rowspan="6" | CSS3
! <code>font-family</code>
| {{yes|4.0}}
| rowspan="4" {{yes|1.9.1}}
| rowspan="4" {{yes|525}}
| rowspan="4" {{yes|2.2}}
|-
! <code>src</code>
| {{partial}}{{#tag:ref|Doesn't understand the <code>format()</code> or <code>local()</code> identifiers.<ref group="t">{{citation |url=http://webfonts.info/wiki/index.php?title=@font-face_support_in_Internet_Explorer |title=@font-face support in Internet Explorer}}</ref>|group=note}}
|-
! <code>font-style</code>
| rowspan="2" {{yes|4.0}}
|-
! <code>font-weight</code>
|-
! <code>font-stretch</code>
| rowspan="2" {{no}}
| {{no}}<ref group="g">{{citation |url=https://bugzilla.mozilla.org/show_bug.cgi?id=3512 |title=Bug 3512 - (font-stretch) Implement font-stretch property |publisher=Mozilla}}</ref>
| {{no}}<ref group="w">{{citation |url=https://bugs.webkit.org/show_bug.cgi?id=12530 |title=Bug 12530 - CSS3: Support the font-stretch property |publisher=Webkit}}</ref>
| rowspan="2" {{no}}
|-
! <code>unicode-range</code>
| {{no}}<ref group="g">{{citation |url=https://bugzilla.mozilla.org/show_bug.cgi?id=475891 |title=Bug 475891 - implement unicode-range support in user font set |publisher=Mozilla}}</ref>
| {{partial}}{{#tag:ref|Doesn't understand multiple, comma-separated ranges.<ref group="w">{{citation |url=http://webfonts.info/wiki/index.php?title=@font-face_support_in_Safari |title=@font-face support in Safari}}</ref>|group=note}}
|-
|}

==Support in HTML and XML documents==
This table compares support for font formats applied with the <code>@font-face</code> rule in [[HTML]] and [[XML]] documents.
{| style="text-align: center; width: 95%;" | class="wikitable"
! Format
! style="width: 15%;" | [[Trident (layout engine)|Trident]]
! style="width: 15%;" | [[Gecko (layout engine)|Gecko]]
! style="width: 15%;" | [[Webkit]]
! style="width: 15%;" | [[Presto (layout engine)|Presto]]
|-
! style="text-align: left;" | Embedded OpenType [[Embedded OpenType|(EOT)]]<ref group="spec" name="eot-spec">{{citation |url=http://www.w3.org/Submission/EOT/ |title=Embedded OpenType (EOT) File Format |publisher=Microsoft, Monotype Imaging |date=2008-03-05 |last=Nelson |first=Paul}}</ref>
| {{yes|4.0}}
| {{no}}<ref group="g" name="moz-eot">{{citation |url=https://bugzilla.mozilla.org/show_bug.cgi?id=520357 |title=Bug 520357 - support new web font format (EOT Lite) in @font-face |publisher=Mozilla}}</ref>
| {{no}}<ref group="w" name="webkit-eot">{{citation |url=https://bugs.webkit.org/show_bug.cgi?id=20542 |title=Bug 20542 - Adding EOT Font Rendering capability |publisher=Webkit}}</ref>
| {{no}}
|-
! style="text-align: left;" | TrueType [[TrueType|(TTF)]]<ref group="spec" name="ttf-spec">{{citation |url=http://developer.apple.com/textfonts/TTRefMan/index.html |title=TrueType Reference Manual |publisher=Apple}}</ref>
| rowspan="4" {{no}}
| rowspan="2" {{yes|1.9.1}}
| rowspan="3" {{yes|525}}
| rowspan="3" {{yes|2.2}}
|-
! style="text-align: left;" | OpenType [[OpenType|(OTF)]]<ref group="spec" name="otf-spec">{{citation |url=http://www.microsoft.com/typography/otspec/ |title=OpenType specification |publisher=Microsoft}}</ref>
|-
! style="text-align: left;" | Scalable Vector Graphics [[Scalable Vector Graphics|(SVG)]]<ref group="spec" name="svg-spec">{{citation |url=http://www.w3.org/TR/SVG11/fonts.html |title=Scalable Vector Graphics (SVG) 1.1 Specification - Fonts |publisher=W3C}}</ref>
| {{no}}<ref group="g" name="moz-svg">{{citation |url=https://bugzilla.mozilla.org/show_bug.cgi?id=119490 |title=Bug 119490 - Implement SVG fonts |publisher=Mozilla}}</ref>
|-
! style="text-align: left;" | Web Open Font Format [[Web Open Font Format|(WOFF)]]<ref group="spec" name="woff-spec">{{citation |url=http://people.mozilla.com/~jkew/woff/woff-spec-latest.html |title=WOFF File Format |publisher=Mozilla, Type Supply, LettError |date=2009-10-23 |last1=Kew |first1=Jonathan |last2=Leming |first2=Tal |last3=van Blokland |first3=Erik}}</ref>
| {{yes|1.9.2}}
| {{no}}<ref group="w" name="webkit-woff">{{citation |url=https://bugs.webkit.org/show_bug.cgi?id=31302 |title=Bug 31302 - Add WOFF support for @font-face |publisher=Webkit}}</ref>
| {{no}}
|-
|}

==Support in SVG documents==
This table compares support for font formats applied with the <code>@font-face</code> rule in [[Scalable Vector Graphics|SVG]] documents.
{| style="text-align: center; width: 95%;" | class="wikitable"
! Format
! style="width: 15%;" | [[Trident (layout engine)|Trident]]
! style="width: 15%;" | [[Gecko (layout engine)|Gecko]]<ref group="g">{{citation |url=https://bugzilla.mozilla.org/show_bug.cgi?id=468237 |title=Bug 468237 - SVG image using a font specified via @font-face doesn't use the font after it loads |publisher=Mozilla}}</ref>
! style="width: 15%;" | [[Webkit]]
! style="width: 15%;" | [[Presto (layout engine)|Presto]]
|-
! style="text-align: left;" | Embedded OpenType [[Embedded OpenType|(EOT)]]<ref group="spec" name="eot-spec"/>
| rowspan="5" {{no}}
| {{no}}<ref group="g" name="moz-eot"/>
| {{no}}<ref group="w" name="webkit-eot"/>
| {{no}}
|-
! style="text-align: left;" | TrueType [[TrueType|(TTF)]]<ref group="spec" name="ttf-spec"/>
| rowspan="2" {{no}}
| rowspan="2" {{no}}
| rowspan="3" {{yes|2.2}}
|-
! style="text-align: left;" | OpenType [[OpenType|(OTF)]]<ref group="spec" name="otf-spec"/>
|-
! style="text-align: left;" | Scalable Vector Graphics [[Scalable Vector Graphics|(SVG)]]<ref group="spec" name="svg-spec"/>
| {{no}}<ref group="g" name="moz-svg"/>
| {{yes|525}}
|-
! style="text-align: left;" | Web Open Font Format[[Web Open Font Format| (WOFF)]]<ref group="spec" name="woff-spec"/>
| {{no}}
| {{no}}<ref group="w" name="webkit-woff"/>
| {{no}}
|}

==Notes==
{{reflist |group=note}}

==References==

===Specifications===
{{reflist | group=spec}}

===Trident references===
{{reflist | group=t}}

===Gecko references===
{{reflist | group=g}}

===Webkit references===
{{reflist | group=w}}

===Presto references===
{{reflist | group=p}}

===Other references===
{{reflist}}

{{Layout engines}}
{{Typography terms}}

[[Category:Digital typography]]
[[Category:Software comparisons|Layout engines]]
[[Category:Layout engines|*]]