In the earlier days wed designers & developers had to make use of limited number of web fonts & hence could not give their web pages more stunning look. However, now this problem has been solved to a major extent as there are wide varieties of viable solutions for this. With the advent of numerous technologies like SiFR, Typekit, Cufon, @Font-Face, most of the web developers have started betting on as to which technology is going to be the future of Web Typography. As of now there has been no compromise on as to which one is the best because each technology has its own pros & cons. Nevertheless all the web browsers tend to support all the technologies & hence it becomes more difficult to judge as to which technology is going to rule the world of web typography in future. This piece of writing will give you a walk through on @Font-Face, a simple & easy CSS method which is among one of the tough competitors in this ever evolving game of web fonts.
@font-face is a cascading style sheet feature that allows you to illustrate a web font on the Webpage of your website irrespective of the fact that the web font is installed or not on the target system. This implies that all the web developers & designers can embark on moving away from Web secure fonts which are pre installed on their PC for example Bookman Old Style, Times New Roman, Bell MT, Verdana, Arial & so forth.
@font-face is being regarded as the Rock star in the developing era of web fonts & is gathering complete attention for the reason that there are several websites which are offering both premium & free web fonts supporting @Font-Face. The present web design trend has set an expectation that the headings, sub headings, titles & logos should make use of non secure web fonts in a web page. This implies that in order to make use of fonts which are not installed on the target system we ought to bring into play various methods for example, ensure that the title is hidden or make sure that the title is replaced with a background picture using some special font. With the advent of @Font-Face we can hide the titles & replace them with scores of time consuming images just by placing one single font file on the server thereby saving both bandwidth & valuable time.
@font-face is a Cascading Style Sheet feature that requires the usage of few lines of CSS code & hence can be sued easily without the usage of any third party tools. It is very easy to use @font-face, you merely have to include few lines of code in your style sheet & just refer to the font files the way you refer to images.
Let us have a look at the basic syntax on how we can use @Font-Face in our web page & customize the web fonts.
Step 1: To begin with just download any of your favorite web fonts from any of the web sites that offer free fonts. Say for example you downloaded the web font named Palatino.
Step 2: After downloading you favorite font from the website, place the downloaded font file in the home directory of your web page.
Step 3: Now you have to write a simple CSS code in your style sheet to make use of the downloaded web font in your web page.
Sample Code Using @font-face:
1 2 3 4 | @font-face { Font-family: “Palatino”; src: url('fonts/Palatino.otf'); } |
The above mentioned code gives a custom font identification for your complete CSS & makes use of the web font file named ‘Palatino.otf’ whenever it encounters this identifier. The very beginning line in the code tells that make Palatino as the identifier for the web font for this CSS. The next line in the code states that whenever Palatino is called the web browser should stack the font file named Palatino.otf from the location where you have placed the file. For example say if you have placed the font file named Palatino.otf’ in a folder called “Favorite Fonts” then in the second line in the code should be written a follows:
Src : url (fonts/‘Palatino.otf’);
It is at all times better to make use of the font name in order to avoid complications. However, you can make use of any name such as say “MyFavFont” provided that you have already used that name elsewhere referring to some web font through it. In order to make use of the font anywhere on your web site merely construct a font stack by making use of the custom font id at the beginning.
It is always suggested that you set font fallbacks & test your design as a minimum once so as to avoid any web page layout breaks. Once you use the above code of @font-Face feature in your CSS, your content on the web page will load instantly, it will be enabled with copy & paste functions, it would be totally selectable & what not. @font-Face overcomes most of the inadequacies rendered by various other web font replacement technologies.
In the present day more or less all famous web browsers support @font-face embedding. Embedding the @font-face lines of code in the CSS is comparatively easy. On the other hand constructing the font file for different types of web browser requires considerably requires more time & bandwidth. To smooth the progress of the web developer in this spot, the Font Face generator came into picture. Font Face generators are usually processor intensive & hence it is suggested that you generate only few fonts in one go. One of the most popular websites which offers the font face generator tool is – http://www.fontsquirrel.com/fontface/generator. You can generate any kind of web secure font by making use of this tool.
@Font-Face is cross-browser compatible & offers several services to make use of custom web fonts easily in your diverse web designs. Are you wondering how fastidious it would be if using custom web fonts was very easy across various web browsers? Certainly, it is not necessary that all the web browsers will be good enough & see eye to eye on a solution. However this is just difficult to deal with but most of the web browsers have provided a list of font formats they are going to support.
- Google Chrome is compatible with SVG & TTF font formats.
- IE is compatible only with EOT font format.
- Opera & Safari browsers are compatible with all the 2 font formats namely OTF, TTF & SVG. Safari browser when used for iPad & iPhone requires SVG font format.
Luckily, there are smart & intelligent developers who have worked this all out for you by developing simple systems to follow.
In order to make use of @font-face across various web browsers you can use the most famous method developed by Paul i.e. Irish’s bulletproof @font-face language rules.
By means of Irish’s technique, you take in several versions of the web font with the intention that it functions correctly on all the web browsers.
The specialty of this code is that it incorporates a small trick; it does not take into account the fonts with the same name that are locally installed. Despite the fact that it is much faster to stack a web font that is locally installed on your system, it’s been in principal accepted that doing so can over and over again lead to muddled outcomes.
The below code illustrates, how you can make use of the bullet proof syntax in your code:
1 2 3 4 5 6 7 8 9 10 | @font-face { font-family: 'CeroxaRegular'; src: url('fonts/ceroxa-webfont.eot'); src: url('fonts/ceroxa-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/ceroxa-webfont.woff') format('woff'), url('fonts/ceroxa-webfont.ttf') format('truetype'), url('fonts/ceroxa-webfont.svg#CeroxaRegular') format('svg'); font-weight: normal; font-style: normal; } |
The first line in the code states that we declare an identifier for our complete code. After that we are using the EOT font format if the web browser you are using is Internet Explorer. If you are not using IE as your web browser in that case it will move down the next line & search for the appropriate compatible font format until it finds a matching one that can actually be used to display your content on the web page. The src: local bit mentioned in the third line of the code demonstrates the small trick just mentioned above. This line states that the web browser should make use of some fictional or imaginary font name that is not present on your machine so that there is no chance of wrong font being displayed.
Always take into account that font representation can differ extensively across various OS & Web browsers. Several web developers have experienced extremely poor outcomes from IE i.e. Internet Explorer & Windows OS that they stay away from using custom fonts on the whole. At all times be sure to inspect your outcomes strictly on each and every web browser that you use so that you can come to a decision as to if the quality is up to the standard or not.
@font-face has evolved very slowly because of several licensing issues .Initially most of the font type founders were unwilling to give away web licenses for their gorgeous & costly web fonts. However, now there exist several low-priced or free web safe fonts with which we can acquire @font-face licenses. Today we are in the world of web typography where we have all kinds of @Font-Face goodies on our prospect & all thanks to the great forward thinking individuals who develop web browsers & are concerned about the designs. To conclude with one can say because of huge dives in web capabilities good-looking typography on the World Wide Web is finally a dream come true.
