Web designers familiar with the latest CSS (style sheet language) modules used in wed page formatting and user interface creation are perhaps aware of the @font-face rule. This module rule is a powerful tool within formatting language that promotes a broadened design expression and offers expanded typeface choices for webpage content authors. This development in web design technology has significant implications for designers, programmers, and persons interested in visually engaging webpages.
The @font-face rule, a feature of the CSS Fonts Module Level 3 (presented in October 2013), allows designers to break from the use of "web safe" fonts. Authors are empowered to pursue their design goals with font choices from a given page of their choosing rather than limiting the font selection to an available set of fonts on a given platform. By separating document content and document presentation the CSS language improves content accessibility, and provides more control in the specification of the design presentation elements within document content, such as layout colors and fonts.
Here's how it works...
Once you have found, bought or downloaded for free the font you want to implement, just include the font file on your web server, and it will be automatically downloaded to the user when needed. The @font-face module rule is that you must first define a name for the font (ex. freeFreshFont), then point to the font file.
CSS language example:
@font-face {
font-family: freeFreshFont;
src: url(freshfontfile_example.woff);
}
[in the "src" font descriptor, use lowercase letters for the URL location]
Within the CSS3 @font-face rule your chosen fonts are defined. A set of font descriptors defines the location of a font resource, locally or externally, as well as the style characteristics. There are several @font-face rules that can be used to develop font families with numerous faces. Using CSS font matching rules, a "user agent" (a software agent) can selectively download only those faces that are needed for a given part of text.
This may be technical for those not familiar with CSS but overall it's an exciting development which opens the breadth of possibilities in presentation for web designers. Typographers can also be excited that their font designs can be applied to websites and mobile applications, growing the potential of exposure of their creations. Contact us to learn how this esoteric subject can positively affect your designs and presentations.
