@font-face : How to add a web fonts in your website


With CSS (Cascading Style Sheets) you can use custom fonts on your website. Normally your visitors can only see the fonts that are already installed on their computers. So if you use a font that is not installed on your website visitor’s computer then his or her browser will show some other font that is there on the computer. That’s why when you are defining a font for an element (such as <p>) you often specify multiple fonts so that if your preferred font is not available your CSS file should use the available alternatives.

CSS has “@font-face” feature to declare custom fonts like .otf or .ttf. Now IE doesn’t supports these types of fonts sometimes. It accepts .eot format. Now, sometimes we have only .ttf or .otf files available. How can we make sure that our custom fonts will display in all browser … ??? 

The solution is “http://www.fontsquirrel.com/“. I found really good way to integrate custom fonts in site using this generator.  Now this site has @font-face kit, @font-face generator etc along with 1000s of free web fonts.

Once you have your own .ttf/.otf file go to “http://www.fontsquirrel.com/fontface/generator” and give that file to that generator and click on “Download your kit”. It will give you one zip file with all diff types of font files for all diff. browser and ALSO, .css file with code which you just need to include in your master page.

Example:

Installing Webfonts

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

2. Include the webfont stylesheet

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

@font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'), url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg'); }

We’ve already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

3. Modify your own stylesheet

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called “font-family.” The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the “font-family” property, inside the selector you want to change. For example:

p { font-family: 'WebFont', Arial, sans-serif; }

4. Final Test in diff. browser… 🙂

 Hope this helps … Happy Coding …. 

Advertisements

3 thoughts on “@font-face : How to add a web fonts in your website

  1. I’m not that much of a online reader to be honest but your sites really nice, keep it up!
    I’ll go ahead and bookmark your website to come back down the road. Cheers

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s