CSS Introduction | CSS3 Modules | CSS3 Web Fonts

CSS3 Web Fonts

In CSS3, web fonts make it possible to use fonts that are not installed on the user’s computer.

CSS3 added the following rule for web fonts.

• @font-face rule

CSS2 Fonts

Until CSS2, only the following font properties could be used.

1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size

CSS3 Web Font Support Versions

The major web browser versions that support CSS3 web fonts are as follows.

Web Font Formats

There are many types of web font formats. The most commonly used web font formats today are as follows.

1. TrueType Fonts (TTF)
2. OpenType Fonts (OTF)
3. The Web Open Font Format (WOFF)
4. The Web Open Font Format 2.0 (WOFF 2.0)
5. SVG Fonts/Shapes
6. Embedded OpenType Fonts (EOT)

TrueType Fonts (TTF)

TrueType Fonts are an outline font standard jointly developed by Apple and Microsoft. This font has long been one of the representative fonts used on Mac and Windows operating systems. TrueType Fonts provide high-level control over how the font is rendered at various font sizes.

OpenType Fonts (OTF)

OpenType Fonts are a font standard that allows users to resize fonts on their own computers. This font was developed by Microsoft to succeed TrueType Fonts, and is now used on almost all computers. OpenType Fonts are based on Unicode, support many scripts, and have the advantage of supporting multiple scripts together at once.

The Web Open Font Format 1.0 (WOFF 1.0)

The Web Open Font Format is a font standard that can be used on web pages, and is currently the font standard recommended by the W3C. This font is a compressed TrueType or OpenType font with additional metadata.

The Web Open Font Format 2.0 (WOFF 2.0)

This font is a TrueType or OpenType font that provides a better compression ratio than Web Open Font Format 1.0.

SVG Fonts/Shapes

SVG Fonts are a font standard used as a sample when drawing text with SVG elements. This font not only allows CSS to be applied to SVG documents, but also allows the @font-face rule to be applied.

Embedded OpenType Fonts (EOT)

Embedded OpenType Fonts are embedded fonts developed by Microsoft for use on web pages, and are OpenType fonts.

Support Versions by Web Font

The major web browser versions that support each web font are as follows.

@font-face Rule

The @font-face rule is used to define web fonts. A web font allows a web browser to use a font that is not installed on the user’s computer.

First, upload the web font to the server. Then define and add the web font in a CSS file by using the @font-face rule. After that, every web browser that accesses the page automatically downloads the web font from the server and displays the text with that font.

To use the @font-face rule in CSS3, first define a name for the new web font by using the font-family property. Then specify the address of the font file that the web font will use.

<style>
    @font-face { font-family: myGothicFont; src: url(/examples/media/NanumGothic.woff); }
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }
    #nGothic { font-family: myGothicFont; }
    #nMyeongjo { font-family: myMyeongjoFont; }
</style>

You can also add an additional @font-face rule for the bold text style of a web font as follows.

<style>
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjoBold.woff); font-weight: bold; }
    #nMyeongjo { font-family: myMyeongjoFont; }
</style>

In the example above, the web browser applies the newly created web font and uses the rule above for bold text. In this way, you can create many @font-face rules for a single web font.

CSS3 @font-face Rule Properties