embedding a font in the code
As for fixing this - see Shawn Conn's answer.

Some more background:

The "Roboto" font is already embedded in your site.  If you look at he markup in your header, it has the following line:

&lt;link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400|Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'&gt;


This should be:

&lt;link href='//fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400|Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'&gt;


to make it work with both HTTP and HTTPS (as already pointed out by Shawn Conn).

Provided this is made to work, it means that if a user don't have Roboto installed, it will be downloaded from the googleapis CDN and cached upon first visit.

The line that inserts that link to the googleapis is probably in html.tpl.php in your site's theme (but I can't be sure - Drupal allows a site developer to insert such links in the header by other means).

Also, your style sheets uses the following every time a font is mentioned:

font-family: "Roboto",sans-serif;


This means: Use "Roboto" when available, otherwise fall back on the browser's default for "sans-serif".  This should work OK in all browsers, including Firefox and Chrome - even if the HTTPS/HTTP mixup mentioned by Shawn Conn stops Roboto from being downloaded.


  Now my website design gets completely screwed up in Chrome and Firefox
  browsers.


I looked at your website in MSIE, Firefox, and Chrome.  I don't see any obvious problems with it.