What Is an HTML Font Face?

In the HyperText Markup Language (HTML), the term "font face" can mean one of two things. It can refer to the face property of the font tag, which is used to define the type of font in which the enclosed text will be displayed. Alternately, it also can refer to the cascading style sheet (CSS) selector font-face, which allows a convenient method for incorporating custom or rare fonts into a website. As of the HTML 4.0 language specification, however, the face property of the font tag has been depreciated, meaning that it will still be rendered by a web browser but a CSS alternative should be used instead.

The HTML font face is used as a property of the font tag itself to specify which font should be used to render the text enclosed inside the opening and closing font tags. Any font can be specified in this way, although it will only be properly displayed if the user has the exact named font already on his computer. If a user does not have the named HTML font face on his local hard drive, then the browser will default to a standard font.

This problem of missing fonts can be mitigated in one of two ways, the first being to only use one of a small series of fonts that come standard with nearly every operating system, ensuring that the font will be displayed correctly. The second option is to use a feature of the HTML font face property that allows listing more than one font as a value, separated by commas. Using a list of fonts with the face property will cause the browser to attempt to load each font in sequence, moving on to the next one if the current font fails to load. This provides a more controlled method of designing a webpage that can remove completely unexpected results.

When the HTML font face property was depreciated, it was replaced with a CSS version. The correct way to specify a font through CSS is to use a style and the font-family property, which functions in an almost identical way to the HTML font face property. Even though the HTML tag property is depreciated, browsers still should support the feature for the sake of backward compatibility.

Through CSS, an HTML font face also can refer to a selector that can be used to load custom fonts from the web server so users can see the page correctly without the need to have the font ahead of time. This selector gives designers a way to specify a font file that is then downloaded and displayed on web browsers that require it. Like many CSS elements, however, some compatibility issues are present between the different browser implementations.