All of the Web Fonts
We have all been developing websites using standard computer fonts or as we know them Web Safe Fonts and all was okay, Everybody was happy with the classics of Verdana, Arial or even push it with Times New Roman, this is a quick insight into new and relatively new services appearing on the internet that help us as designers embed new and exciting fonts into our designs.
Cufon
Then like many others I found Cufon, which is a handy font application that allows you to take your fonts and create a javascript include file to then render your fonts on your web page. They only asked that any Javascript scripts generated from your fonts be a font that is free for use or is one you own.
This is a very useful Web Font generator to use with custom fonts from your collection and there are instances where this is needed. The only downside that can be seen is the loading of extra JavaScript files, which depending on how many fonts you wish to embed or use, could mean there are several extra files the site needs to load before it is displayed increasing on overhead load.
Conclusion
The freedom to use whatever fonts is very nice with Cufon, for my demo I just found a free to use font called Worstveld Sling which I downloaded here http://www.dafont.com/worstveld-sling-ext.font
I found the documentation very helpful in what to do and how to setup my new font.
TypeKit
A system that I have not used very much if at really at all, the reason for this is Typekit is a account based service that starts from a 1 website free account and only allows 25,000 views and 2 fonts to be used, all the way up to a $100.00 account a year that allows 1 million views on unlimited websites and fonts.
This could be a very easy way to get premium Web Fonts on any websites you design, as for now I am very limited in its usage, but have spent some time during the writing of this post creating some demos and using the scripts.
Conclusion
I found typekit quite a confusing system to use because of the way that the package manager handled my requests and I could not find definitive instructions on how to integrate typekit into my site beyond being given the scripts and told “use these”.
I struggled with the understanding of selector but after a couple of minutes everything did start working and the result cannot be argued with, the system works well and the fonts do seam to appear in most browsers.
The font I used in my typekit demo was called Scrivano.
@font-face
@font-face would be one of the oldest and most supported Web Font technologies and is even supported by such browsers dating back to Internet Explorer 5.5 days (1999), which was seen as a surprise even back then. This is because the Internet Explorer browser has a bad reputation in what web technologies it supports, such troubles have been seen with PNG images, HTML5 & CSS3 support, which have always arrived a lot later than other browsers, even then the older versions were still about and would ignore these new technologies, rendering websites broken or buggy.
The @font-face team developed a system in which you could select from a large array of fonts free for use and then embed them into your websites Style Sheet then using basic CSS techniques, no extra loading no extra images or rendering, just a font.
Although recently the @font-face team said on a press release that they would be stopping support for hosting their selection of fonts due to the release of the Google Font Directory Service. The @font-face team admits this was a blow to their service but they will return in the near future with some new and exciting features and a new direction.
Since finding the @font-face service and using it for a couple of projects I found myself liking how easy it is to use and include into my web projects. To help with this and to make the use of more fonts i found the @font-squirrel service to be most helpful, you can browse a selection of hundreds of free fonts and then download a package which included the required css and font files, they even give you a font-generator option where you can upload your own font and it will check it and generate all the necessary code so you can just embed the CSS code into your sites and have your custom fond.
Conclusion
@font-face would be one of my favorite web font technologies to date and I have used it on several developments, and with @font-squirrel I find the integration of @font-face web fonts to be a very easy task, @font-squirrel has an array of font choices and all it takes is one pick and it downloads the font files to work on all browsers and the CSS code which makes each font work.
A brilliant technology with a top font service.
The font used in this demo was called College http://www.fontsquirrel.com/fonts/College
Google Font Directory
Finally I have come to Google Font Directory web font service, This is the new boy to the field and has only appeared in the last couple of weeks. But being that this is a Google service many people see it as a major improvement upon the existing @font-face service. As all fonts will be hosted by Google with their intelligent scripts if another site has used a font that you use it does not need to be downloaded again because your browser has already learned this font. This is a major benefit to using the Google Font Directory service and is why it seams many people will be turning that way in the near future.
As it sits at the minute the Google Font Directory only consists of 18 fonts with many variants, this is soon to grow and expand and with some simple CSS code just like the @font-face technology Google will begin to produce and provide fonts for your future websites quickly and easily.
Conclusion
As this is the first time I have used Google’s Web Fonts, I was amazing surprised as to how easy it actually was to use, Though @font-face is very simple to use and is a widely supported CSS tag, Google WebFonts just makes it much easier, so much so it is easier to use than @font-squirrel. Google only ask you embed their css file and they even give instruction on how to simply @import it to existing stylesheets, then you just call the font in basic a CSS font-family tag just like normal with @font-face
The font I used for this demo was Tangerine and is available from the web fonts directory.
Overall
I have posted these 4 popular web font services available on the internet and i’m sure they are all in very wide usage worldwide, and even though some were trickier to use than others don’t just take my word for it try them for yourselves.
I did not notice any speed differences between these technologies but I am led to believe that Cufon and Typekit change the fonts after or even during the page load and you can see the font change however the @font-face technology does not seam to, this due to the fact the browser it loading the font in alongside the website structure thus the custom font appears right away.
Note
These are the top services I have used or even just considered using, I am sure there are many other Web Font services or technologies out there, so don’t take offense that I may have left your favorite out, instead leave a comment and I will continue my research into web fonts.