Web Design Tips, Tutorials & More!

Essential Guide to @font-face

The significance of fonts to a web page has been deliberately emphasized in the web designing culture overtime. No longer are designers limited to a hand full of fronts on a web page but there is now immensity within the science. Cufon, sIFR, FILR and @ font-face are a few interventions, which had added to the variety of such development within the web front technology.
However, expert have recommended @ font-face CSS to be one of the most popular and easiest fonts, which can be efficiently utilized within the science. It offers a variety of options to the designer and definitely enhances topography.
The purpose of this article is to teach designers how these fonts can be best used in their work and some alternatives, which are available. The popularity of @font-face has forced many font manufactures to deliberately create avenues that circumvent the efficiency of this product. It then becomes important for designers to know how to apply @ font-face to achieve cross browser compatibility.

Licensing and fee fonts

Obviously, font foundries will prefer to be paid for their effort, but it does not always happen even with licensing restrictions. As such, the two fonts discussed in this article are among the oneswhich are for free distribution Fontex and Font Squirrel.

The basic syntax

Application of @font-face requires the designer to utilize some lines on the CSS. Therefore, in commencing the process simply visit Chunkfive and select the ‘free font’ option download. After down load is completed, put the font file into root directory space of the webpage. Now enter the style sheet andintroduce the code displayed in the diagram below.
The‘custom font’ displayed is given an identifier through a snippet. It can be used for the rest of the CSS. On this line, the code identifier is set to read Chunk five. At the same time, allow the 2nd line to active Chunkfive when ever needed as the browser is instructed to respond.

Remember to always test the design before confirming it as complete whenapplying @font-face to the production. It would ensure that the layouts do not break. The fall back font can be very useful in achieving this.

Cross Browser compatibility

Cross browser compatibility is fundamental to the application of fonts onto a design. It is known that all browsers do not support every font style. Therefore, the designer must select the ones that do. Internet Explorer supports only EOT; Mozilla OTF and TTF; Safari and OperaTTF,OTF and SVG; Chrome SVG, andTTF.The most famousmode of employing @font-face overvarious browsers appears to be of Paul Irish’s one.

@font-face kit generator

Many designers might ask after downloading Chunkfive how will the various font styles be obtained. It is simple! Becoming acquainted with the font kit generator is key to realizing the numerous fonts available to designers depending on their individual preferences. This tool converts all fonts needed for the application.

Popular @font face services

Earlier it was mentioned that many other services emerged, I response to @font-face. These include Goggle font API; Typerkit; Typotheque; fonts live and kernest. Remember that there is the added advantage of generating individual@ face-face knit to meet the specific need.


Leave a Reply