CSS3 Web Fonts

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

CSS3 Web Fonts - The @font-face Rule

The @font-face rule enables custom text styles to be stacked into a page. .

With the assistance of this standard, structures are never again restricted to the textual styles that are introduced on a client's PC.

Your "own" text styles are characterized inside the CSS3 @font-face rule.

Browser Support

The numbers in the table indicate the main program form that completely underpins the property.

@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

*IE: The textual style group possibly works when set to be "installable".

*Firefox: Not bolstered of course, however can be empowered (need to set a banner to "true" to utilize WOFF2).

Using The Font

Each type of the textual style family should be pronounced utilizing the @font-face rule

To utilize the textual style for a HTML component, allude to the name of the textual style (wefont) through the font-family property:


@font-face {
    textual style family: wefont;
    src: url(sansation_light.woff);

div {
    textual style family: wefont;
Try it yourself »

Using Bold Text

You must include another @font-face rule containing descriptors for striking text:


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

The document "sansation_bold.woff" is another textual style record, that contains the strong characters for the Sansation font.

Browsers will utilize this at whatever point a bit of content with the textual style family "wefont" should render as bold.

This way you can have numerous @font-face rules for the equivalent font.