Many times design has to surrender to positioning. That is to say, we have to give up having a nice header, or some titles, because they are made with a type of special font that 90% of users do not have (there are only a dozen of them), and that would force us to put it as an image. And since we all know that images don’t index as well as text, we forego that design change. Well, the rubbing is going to end.
There are currently five solutions on the net to create titles with special fonts, even if the user does not have it downloaded to their computer. Is about @font-face, siFR, FIR, TypeFace.jsY cufon. Let’s examine the possibilities one by one:
1. @font-face:
Implemented by the w3cthe property applies to the CSS so that the original source file can be added, which the user automatically downloads when viewing the web. Currently only Safari supports it, and Explorer for EOT fonts (not TTF), and it is said that Opera and Firefox will soon do so.
The strengths are that the implementation is very easy, since only the styles need to be defined. The negative points are that it still doesn’t work in most browsers, and that there are font copyright issues, since the user can have access to the source code.
2. sIFR:
The initials of . It is a technology that allows you change specific texts by Flash. This system replaces any text element, with any type of letter, by a Flash that allows users to see any type of font, even if they do not have it installed, since it remains embedded in the Flash.
sIFR requires JavaScript and Flash to function properly. If these two conditions are not met, the text will be displayed through the style that has been defined in the CSS. Let’s see an example, where the title of the post is a Flash, as we can see if we click with the right mouse button on it.
The strengths of sIFR are that it text can be selected, and that you can add many types of effects. The weak points are, apart from its slow charging, which require JavaScript and Flash. Also, if you are not a developer with a medium level of knowledge, the implementation can be difficult for you. So I don’t recommend it.
3. FLIR / facelift
The initials of . This system works through PHP technology, and the GD library. Renders the fonts on the server, and post them as images.
The positive part of this option is that no technology apart from PHP is necessary, and that the source is perfectly displayed as an image. The negative part is that once again, we have an image that has to be loaded, a slow process, and also you can’t select the text. So I don’t recommend it.
4.typeface.js
The technology tells the browser (and not to the server) which should redraw the font via VML (Vector Markup Language) in the case of Explorer, and through HTML5 for more advanced browsers. Currently it only supports TTF fonts.
Through the vector drawing we load the fonts to a much faster speed than the versions that use images or Flash. The positive part of this method is that it is much faster than the systems of replacement by images or Flash. The negative part is that it requires javascriptand that it only works with TTF and in certain browsers (more details on this later).
5. Cufon
is, in my opinion, a improved version of typeface.jsin which they have improved the ease of implementation. The script takes up less space than the typeface case, compresses the font more, works in more browsers, and accepts more types of fonts (TTF, OTF, PFB, and PostScript). For a comprehensive comparison between the two systems, I recommend reading Kilian Walkhof’s “” where he goes into detail, and even has a .
Cufón’s strengths are the speed of charge Compared to SIFR and FLIR, it just uses JavaScript and nothing else. It only has the handicap that you must use it with , and that the text cannot be selected. Not only do I recommend it, but I also use it on my website. Specifically in the header and titles of the posts.
6. The best solution
So, here are the 5 basic solutions to be able to display special fonts on any web page. But there is an ace up the sleeve. What if we want the best of both worlds? In case what you want is to maximize the speed with the compatibility, there is a mixed solution which is more than good. Let’s see how:
Is about combine Font and @font-face through a bit of programming. The idea is in:
1. Check first if the user has the source already on your computer. In that case, we show it as is.
2. In case you don’t have it, if the browser supports @font-facewe will use this system for CSS.
3. Finally, if the user does not have the font, nor does it support @font-face, Cufón will come into play.
Simple truth? This can be achieved by a simple structure of if Y else. For all those who are not programming cracks (including myself)here they are.
Well, here it is all. I hope it is of some use to you. If you know of any other method to show alternative sources, or you can add some information that has left me in the dark, leave a comment, you are always welcome! 😉
Facebook Comments
Disqus