CSS3 include this nice function supported by most browsers like IE 9, Google Chrome, Safari, Mozilla Firefox, Opera etc. The main purpose of this is to enhance the text based sites and blogs look more pretty and give look as per design of your blog. This is done by function @font-face . This function describer the remote url of your required font and your desired font name. But starting this you must have your desired font in some different formats like ttf, eot etc. You can easily colloect font by searching in google and if you can't find all formats you can use @font-face generator. You can go here to use @font-face genarator www.fontsquirrel.com/fontface/generator .
This picture will explain why custom fonts are in demand than old web-based fonts.
So after you have font in all formats we can continue and let us try this simple css.
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
This picture will explain why custom fonts are in demand than old web-based fonts.
So after you have font in all formats we can continue and let us try this simple css.
@font-face{font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */}
In above code the name under @font-face {font-family: myFirstfont;} is that name which you can use in any css class and properties. One thing more to tell this is that it is better to use full address (http://example.com/any.ttf) instead if only writting font name (any.ttf). This will make your font available to use n every page of website. You can also use some more properties to make your font looks cool and fine.
- font-stretch - normal , condensed, expanded etc.
- font-style - normal, italic and oblique.
- font-weight - normal, bold 100-900 .
So next time you can use your font very esily by just writting these these few html lines
<div style="font-family: myFirstFont; font-weight:bold; color:grey;">Desire word or line</div>
So here this small and helpful post ends, if you have any question or suggestion feel free to comment.
