CSS3 Web Fonts

With CSS3, website specialists are never again compelled to utilize just web-safe textual styles

In previous versions of CSS3 , web designers had to use fonts already installed on users' computers.

Using CSS3 , the web designer can use any font he /she likes.

When you find the font file you want to use, simply include the font file in the website and it will be downloaded automatically to the users who need it.

The font you have selected is described in the new CSS3 version about the @ font-face rule.

Your "own" font is defined in the CSS3 @ font-face rule.

Browser Support

The numbers in the table indicate the first browser version number that supports this attribute.

@font-face 4.0 12.0 9.0 3.5 3.2 10.0

Different Font Formats

TrueType Fonts (TTF)

TrueType is a textual style standard created in the late 1980s, by Apple and Microsoft. TrueType is the most widely recognized textual style group for both the Mac OS and Microsoft Windows working systems.

OpenType Fonts (OTF)

OpenType is an arrangement for versatile PC text styles. It was based on TrueType, furthermore, is an enlisted trademark of Microsoft. OpenType text styles are utilized ordinarily today on the major PC platforms.

The Web Open Font Format (WOFF)

WOFF is a text style position for use in pages. It was produced in 2009, and is presently a W3C Recommendation. WOFF is basically OpenType or TrueType with pressure and extra metadata. The objective is to help text style dissemination from a server to a customer over a system with transmission capacity constraints.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType textual style that gives preferable pressure over WOFF 1.0.

SVG Fonts/Shapes

SVG textual styles permit SVG to be utilized as glyphs while showing content. The SVG 1.1 detail characterize a textual style module that permits the formation of text styles inside an SVG archive. You can likewise apply CSS to SVG archives, and the @font-face rule can be connected to content in SVG documents.

Embedded OpenType Fonts (EOT)

EOT text styles are a minimized type of OpenType textual styles structured by Microsoft for use as installed textual styles on web pages.

Browser Support for Font Formats

The numbers in the table determines the primary program form that completely underpins the textual style format.

Font format
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 Not supported 36.0 35.0* Not supported 26.0
SVG Not supported 4.0 Not supported 3.2 9.0
EOT 6.0 Not supported Not supported Not supported Not supported

Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support WOFF (Web Open Font Format) fonts.

Firefox, Chrome, Safari, and Opera support .ttf (True Type font) and .otf (OpenType) font type).

Chrome, Safari and Opera also support SVG fonts /folding.

Internet Explorer also supports EOT (Embedded OpenType) fonts.

Note: The new @ font-face rule is not supported in Internet Explorer 8 and earlier.

Using The Font

In the new @ font-face rule, you must first define the name of the font (such as myFirstFont) and then point to the font file.

lamp Tip: Please use lowercase font for URLs. Uppercase letters will produce unexpected results in IE.

To use a font for an HTML element, refer to the name of the font through the font-family attribute (myFirstFont):


<style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>
    textual style family: wefont;
Try it yourself »

Using Bold Text

You must add another @ font-face rule containing bold text::


@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }
Try it yourself »

The file "Sansation_Bold.ttf" is another font file that contains the bold font of the Sansation font.

Browsers should use this text's font family "myFirstFont" in bold.

This way you can have many of the same font @ font-face rules.