Web safe fonts – the word that has been limiting the design trends and possibilities for ages, all because not all computers have same fonts. You yourself might have been in such situations where you have used an image or simply went on with the “web safe fonts” and compromised with your design. Though a lot of advancement has been seen on the field of web, Fonts have for some strange reasons been given lesser thoughts hence leaving it where it was at it’s birth. But there were some positive steps taken a couple of years back, what was found as potential successor to other fonts was creating an image at run time for the fonts using javascript library. Though this is still in use and there are methods like sIFR, Facelift and other more, the main problem is their feature – that it turns fonts to image, which make it less user friendly, less Search Engine friendly, non select able and and also take a lot of loading time.
ou want and without any problem. So what has been the change? Do you need to add extra lines of code? or do you link to heavy files from another server and all those stuffs? No!
That is the answer NO! because now using the fonts you want are as easy as writing any general CSS. Yes it is as simple as that. And if you do not have good enough fonts, then you can use either Fonts.com‘s webfont or you could also use Google‘s own Web Font. They have a huge library of fonts and all you have to do it put one single line of javascript code into your site, and you could start using fonts of your choice without any other hurdles. Now isn’t that sweet?
Now that was a way you could use fonts using online services, but you could also add fonts all by yourself and without any problem. Here is how you can do that.
First upload your font at your web server at any path that is easy to you, and At your style sheet first define a font face this way
[code]
@font-face {
font-family: ‘myfont’;
font-style: normal;
font-weight: 400;
src: url(‘myfont.ttf’);
}[/code]
What you have done here is created a new font-family to be used in your CSS. Now all you have to do to use this font, is to call it at font-family like i have done
[code]
h1 { font-family:myfont; font-size:28px; }
[/code]
And yes it is as simple as that and that is what webfonts.com and Google web fonts do too. So go ahead take you design to a whole new level with so many fonts to use and let the designer in you get into business. I hope this helped you. Well then, I’ll see you at another article ;)
