Web typography refers to the use of fonts on the World Wide Web . When HTML was first created, both languages ​​were controlled by the Web browser . There was no mechanism for individual Netscape introduced <font>in 1995, which was standardized in the HTML 3.2 specification. However, the fact that they have been made to be used by the user is a fallback, as such a browser’s default sans-serif gold minivan do, would be used. The first Cascading Style Sheets was published in 1996 and provided the same capabilities.

The CSS2 specification was released in 1998 and attempted to improve the process by adding matching, synthesis and download. These techniques were not widely used, and were removed in the CSS2.1 specification. HOWEVER, Internet Explorer added for the carrier are downloading feature in version 4.0 , released in 1997. [1] Font downloading Was later included in the CSS3 Fonts Module, and since beens HAS Implemented in Safari 3.1 , Opera 10 and Firefox 3.5 . This site has a greater interest in Web typography, as well as the use of downloading.


In the first CSS specification, [2] authors are specified characteristics via a series of properties:

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size

All fonts were identified by name. Beyond the properties mentioned above, designers, no no.

Web-safe fonts

Web-safe fonts are fonts Likely to be present was wide-range of computer systems, and used by Web pleased authors pour augmenter the likelihood That pleased displays in Their Chosen do. If a visitor to a Web site does not have the specified, their browser tries to select a similar alternative, based on the author-specified fallback fonts and generic families or it uses a substitution set in the visitor’s operating system.

Microsoft’s Core fonts for the Web

Since being released under Microsoft’s Core Fonts for the Web Program, Arial, Georgia, and Verdana have become three de facto fonts of the Web.
Main article: Core fonts for the Web

To ensure that all users had a basic set of fonts, Microsoft started the Core for Web Initiative in 1996 (terminated in 2002). Released fonts include Arial , Courier New , Times New Roman , Comic Sans , Impact , Georgia , Trebuchet , Webdings and Verdana -under year EULA That Made Them freely distributable goal aussi limited some usage rights. Their high penetration rate has made them a staple for Web designers. However, most Linux distributions do not include these fonts by default.

CSS2 attempted to increase the tools available to Web developers by adding synthesis, improved accessibility and the ability to download remote fonts. [3]

Some of CSS2’s properties are removed from CSS2.1 and later included in CSS3. [4] [5]

Fallback fonts

Main article: Fallback font

The CSS specification allows for multiple fonts to be listed as fallback fonts. [6] In CSS, the font-familyproperty accepts a list of comma-separated

font-family: Helvetica, "Nimbus Without L", "Liberation Without", Arial, sans-serif;

The first is specified is the preferred font. If this is not available, the following web browser attempts to use the font in the list. If none of the fonts specified are found, the browser displays its default font. This same process also happens on a per-character basis if the browser tries to display a character not present in the specified font.

Generic font families

To give web designers the ability to use their Web pages, the CSS requires the use of multiple generic families. These families are designed to split into several categories based on their general appearance. They are commonly specified as the latest in a series of fallbacks, as they are available. There are five generic families: [6]

Sans serif

Fonts do not have decorative markings, or serifs, on their letters. These fonts are often considered easier to read on screens. [7]


Fonts that have decorative markings, or serifs, present on their characters.

People Carrier

Fonts in other languages


Fonts that resemble cursive writing. These fonts may have a decorative appearance, but they may be difficult to read at small sizes, so they are used sparingly.


But still represent the specific character.

Web fonts


CSS2 specification, which introduced the @font-faceconstruct. At the time, fetching files for the web was controversial because it could be used for certain web pages. [8]

Microsoft first added support for downloadable EOT fonts in Internet Explorer 4 in 1997. hors hors WE WE WE WE WE WE WE WE WE WE WE WE WE WE. EOT showed that it could be used in many ways by the common operating systems. However, the W3C format never wins over W3C. [9]

In 2006, Håkon Wium Lie started a campaign against using common formats. [10] [11] [12] Support for the commonly used TrueType and OpenType formats have been implemented in Safari 3.1 , Opera 10 , Mozilla Firefox 3.5 and Internet Explorer 9 .

In 2010, the WOFF compression method for TrueType and OpenType was submitted to W3C by the Mozilla Foundation , Opera Software and Microsoft , and browsers. [13] [14] [15]

Google Fonts was launched in 2010 to serve under the free software licenses. By 2016, more than 800 webfont families are available. [16]

Webfonts have become a major tool for web designers and as of 2016 a majority of sites use webfonts. [17]

File formats

Main article: Comparison of layout engines (web typography)

By using a specific CSS @font-faceembedding technique [18] it is possible to embed such work with IE4 +, Firefox 3.5+, Safari 3.1+, Opera 10+ and Chrome 4.0+. This allows the vast majority of Web users to access this functionality. Some commercial foundries object to the redistribution of their fonts. For example, Hoefler & Frere-Jones says that, while they “… enthusiastically [support] the emergence of a more expressive Web in which designers can safely and reliably use high-quality online,” the current delivery of fonts using @font-faceis considered “illegal distribution” by the foundry and is not permitted. [19]Instead, Hoefler & Co. offer a proprietary delivery system rooted in the cloud. Many other commercial type foundries address the redistribution of their license, which is a license, which permits the use of the software to display content on the web, and is normally used by the desktop. Naturally this does not interfere with fonts and under license. [m 1]


TrueDoc , while not specifically a webfont specification, was the first standard for embedding fonts. It was developed by the foundry type Bitstream in 1994, and became natively supported in Netscape Navigator 4, in 1996. Netscape Navigator 6 was unable to release Bitstream’s source code, Netscape Navigator 6 was released. An ActiveX plugin Was available to add the support for TrueDoc to Internet Explorer , the object technology Had to compete contre Microsoft ‘s Embedded OpenType fonts, qui HAD natively supported In Their Internet Explorer browser since version 4.0. [20]Another impediment was the lack of open-source or free tool to create webfonts in TrueDoc format, the earlier Microsoft made available a free Web Embedding Fonts Tool to create webfonts in their format.

Embedded OpenType

Internet Explorer has been made embedding by the proprietary Embedded OpenType standard since version 4.0. It uses digital rights management techniques to help prevent a person from being copied and used without a license. A simplified subset of EOT has been formalized under the name of CWT ( Compatibility Web Type , formerly EOT-Lite ) [21]

Scalable Vector Graphics

Web typography applies to SVG in two ways:

  1. All versions of the SVG 1.1 specification, including the SVGT subset, define a module allowing the creation of an SVG document. Safari introduced support for many of these properties in version 3. added added Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera .
  2. The SVG specification lets you apply to SVG documents in a similar way to HTML documents, and the @font-facerule can be applied to text in SVG documents. Opera added support for this in version 10, [22] and WebKit since version 325 also supports this method using SVG fonts only.

Scalable Vector Graphics Fonts

SVG fonts is a W3C using SVG graphics that is now a subset of OpenType fonts. [23] This allows multicolor [24] or animated fonts. [25] The SVG is a subset of SVG 1.1 specifications [26] The SVG is independent of IE and Firefox, and is deprecated in Chrome (and Chromium). [27] That’s now generally deprecated; the SVG is subset included in OpenType (and then WOFF superset, see below), called SVGOpenTypeFonts . [28] Firefox has supported SVG OpenType since Firefox 26. All major browsers should comply soon. [29]

TrueType / OpenType

Main articles: TrueType and OpenType

Linking to industry-standard TrueType (TTF) and OpenType (TTF / OTF) is supported by Mozilla Firefox 3.5+, Opera 10+, [30] Safari 3.1+, [31] and Google Chrome 4.0+. [32] Internet Explorer 9+ supports only those fonts with embedding permissions set to installable. [33]

Web Open Font Format

Main article: Web Open Font Format

WOFF is essentially OpenType or TrueType with compression and additional metadata. WOFF is supported by Mozilla Firefox 3.6+, [34] Google Chrome 5+, [35] [36] Opera Presto , [37] and is supported by Internet Explorer 9 (since March 14, 2011). [38] Support is available on OS X Lion’s Safari from release 5.1.

Unicode fonts

Only two fonts available by default on the Windows platform, MS Sans Serif and Lucida Sans Unicode , Provide a wide Unicode character repertoire. A bug in Verdana (and the different handling of it by various user agents ) hinders its usability where combining characters are desired.


A common hurdle in Web design is the design of mockups that are not Web-safe. There are a number of solutions for situations like this. One common solution is to replace the text with a similar Web-safe or a series of similar-looking fallback fonts.

Another technique is image replacement . This practice involves overlaying text with an image containing the same text in the desired font. This is good for aesthetic purposes, but prevents text selection, increases bandwidth use, is bad for search engine optimization , and makes the text inaccessible for users with disabilities.

Also common is the use of flash- based solutions such as sIFR . This is similar to image replacement techniques, though the text is selectable and rendered as a vector. However, this method requires the presence of a proprietary plugin on a client’s system.

Another solution is using JavaScript to replace the text with VML (for Internet Explorer) or SVG (for all other browsers). [39]

Font hosting services allow users to pay a subscription to host non-Web-safe fonts online. Most services host font for the user and provide the necessary @ font-face CSS declaration.

An example of a CSS @ font-face setup:

 @ font-face {
 font-family : 'Journal' ;
 src : url ( 'http://your-own.site/fonts/journal/journal.woff' ) format ( 'woff' ),
 url ( 'http://your-own.site/fonts/journal/journal. svg # Journal ' ) format ( ' svg ' ),
 url ( ' http://your-own.site/fonts/journal/journal.ttf ' ) format ( ' truetype ' ),
 url ( ' http: // your- own.site/fonts/journal/journal.eot ' ),
 url ('http://your-own.site/fonts/journal/journal.eot?#iefix' ) format ( 'embedded-opentype' );
 font-weight : normal ;
 font-style : normal ;

Practical considerations

This section needs expansion . You can help by adding to it . (August 2014)

In practice, it matters not only what is the browser but also how is its operating system configured? In 2010, type designer and consultant Thomas Phinney (Vice President of FontLab and formerly with Adobe [40] ) wrote a step-by-step process for finding the best rendering solution, which-more or less jokingly-uses a large number of goto statements. [41] A more visually oriented flow chart was posted in the same year on the Typophile forum by Miha Zajec. [42]

See also

  • Scalable Inman Flash Replacement
  • List of RFC as mentioned in WOFF (draft of 2009-10-23):
    • RFC 1950 ZLIB Compressed Data Format Specification
    • RFC 2119 Key words for RFCs to Indicate Requirement Levels
    • RFC 4647 Matching Language Tags


  1. Jump up^ SeeOpen-source typefacesandFree Unicode software typefaceslistings for such fonts.


  1. Jump up^ Garaffa, Dave (September 2, 1997). “Embedded Fonts In Microsoft IE4pr2” . Internet.com . Archived from the original on 8 July 1998.
  2. Jump up^ Cascading Style Sheets, level 1 , W3C, 1996-12-17
  3. Jump up^ “Fonts” , Cascading Style Sheets, Level 2: CSS2 Specification ,World Wide Web Consortium , 1998-05-12 , retrieved 2009-07-28
  4. Jump up^ CSS2.1 Changes -C.2.97 Chapter 15 Fonts , World Wide Web Consortium , Retrieved 2010-01-30
  5. Jump up^ CSS3 module: Web Fonts , World Wide Web Consortium , retrieved 2010-01-30
  6. ^ Jump up to:b “CSS2 specification” , Fonts , World Wide Web Consortium
  7. Jump up^ Poole, Alex (2005-04-07). “Which Are More Legible: Serif Gold Sans Serif Typefaces?” . Archived from the original on 2017-07-22 . Retrieved 2017-09-27 .
  8. Jump up^ Hill, Bill (2008-07-21) Font Embedding on the Web , Microsoft
  9. Jump up^ W3C team how
  10. Jump up^ Microsoft’s forgotten monopoly
  11. Jump up^ Web site: the view from the free world
  12. Jump up^ CSS @ Ten: The Next Big Thing
  13. Jump up^ WOFF File Format 1.0 Submission Request to W3C
  14. Jump up^ Galineau, Sylvain (2010-04-23), Meet WOFF , Microsoft Standard Font Format , Microsoft
  15. Jump up^ WOFF conversion code reference , retrieved May 8, 2016
  16. Jump up^ “The new Google is a design geek’s paradise” . Theverge.com . Retrieved 24 August 2016 .
  17. Jump up^ Richard Fink (2016-09-06)WebFonts on the Prairie, Alist Apart
  18. Jump up^ Kimler, Scott Thomas (2009-07-04), xBrowser Fonts – Expand Your Font Palette Using CSS3 , retrieved 2010-02-05
  19. Jump up^ Wubben, Mark (February 27, 2009). “Geek Meet: Web Typography and sIFR 3 – Slide 15 and 16” . SlideShare . Retrieved 17 March 2010 .
  20. Jump up^ Niederst, Jennifer (2001). Web design in a nutshell: a desktop quick reference (2nd ed.). O’Reilly. p. 36. ISBN  0-596-00196-7 . Retrieved 20 March 2016 .
  21. Jump up^ Daggett, John (2009-07-31), EOT-Lite File Format v.1.1 , World Wide Web Consortium , retrieved 2010-01-30
  22. Jump up^ Mills, Chris (2008-12-04), Opera Presto 2.2 and Opera 10 – first look ,Opera Software , retrieved 2010-01-30
  23. Jump up^ SVG in OpenType , W3C , retrieved 2014-09-20
  24. Jump up^ Colorful typography on the web: get ready for multicolored fonts , Pixel Ambacht , retrieved 2014-09-20
  25. Jump up^ Anymated Glyph Example , people.Mozilla , retrieved 2014-09-20
  26. Jump up^ Fonts , W3C , retrieved 2014-09-20
  27. Jump up^ Can I Use SVG fonts , CanIuse , retrieved 2014-09-20
  28. Jump up^ SVGOpenTypeFonts , Mozilla , retrieved 2014-09-20
  29. Jump up^ The CSS Corner: Better Web Typography For Better Design , Microsoft , retrieved 2014-09-20
  30. Jump up^ Mills, Chris (2008-12-04), Opera Presto 2.2 and Opera 10 – First Look, Opera Developer Community , retrieved 2010-01-29
  31. Jump up^ Marsal, Katie (2008-02-07), Apple’s Safari 3.1 to downloadable support web fonts, more , AppleInsider , retrieved 2010-02-05
  32. Jump up^ Irish, Paul (2010-01-25), Chrome and @ font-face: It’s here!
  33. Jump up^ Galineau, Sylvain (2010-07-15), The CSS Corner: Better Web Typography For Better Design , Microsoft
  34. Jump up^ Shapiro, Melissa (2009-10-20), Mozilla Web Support Open Font Format , Mozilla , retrieved 2010-02-05
  35. Jump up^ Gilbertson, Scott (2010-04-26), Google Chrome to Open the Web Format Font , webmonkey
  36. Jump up^ Bug 38217 – [chromium] Add WOFF support , WebKit
  37. Jump up^ Web specifications support in Opera Presto 2.7 , Opera
  38. Jump up^ Galineau, Sylvain (2010-04-23), Meet WOFF , Microsoft Standard Font Format , Microsoft
  39. Jump up^ About Cufon
  40. Jump up^ http://www.adobe.com/products/type/font-designers/thomas-phinney.html
  41. Jump up^ Phinney Thomas (October 13, 2010)Font rendering in web browsers: find-your-font adventure
  42. Jump up^ http://typophile.com/node/70216as cited by Phinney