Monday, June 10, 2013

How to use any font you like with CSS3

With CSS3  font face rule, you can render any font online within your webpages, whether it is installed in user's computer or not.


In this short tutorial we will go through the basics of including custom fonts in your pages.


Upload the font

First of all, make sure that the font you want to use is licensed for web use.Almost all free fonts can be used on a website.
Then upload your chosen font on your server.

Remember to include the files for any variants of the font you plan on using,such as bold or italic.You can use EOT ( Embeded Open Type ) files for Internet Explorer and either OTF 
( OpenType ) or TTF ( TrueType ) for the rest.

Make a note of where the font files are stored on your server.


Add a font-face section to your CSS code


Open the HTML or CSS file for the page you are working with. Add a font-face declaration to the style code:

@font-face {
}
First inside the font-face section, give the font a name you can later use to refer to it:

font-family: 'myfont';
Next, inside the font-face section, provide the location of the file:

src: url('fonts/myfont.eot'); 
src: url('fonts/myfont.otf') 
src: url('fonts/myfont.ttf') 

Apply the font to page elements


Now we can apply the font to the page elements.In the CSS code for a particular element, simply specify the font name you used.


div { font-family: 'myfont', sans-serif; }
That's It !
For more information about our company visit our website:
http://www.sbitinfo.in

No comments:

Post a Comment