to use calibri style for mac,ios,linux

Question

As the calibri style is there in the Windows O.S but the calibri style is not there in the linux,mac,ios.If my project is having its style only in calibri(and I strickly have to use it)so if the user using the linux and run my project then my look of the project will change and if I copy/install the calibri in my linux it will be shown on my system only.I have done that in the war folder of my project I copy the calibri in ttf,otf,eot,woff form but still no change.So what should I do to use the calibri style for all the O.S.The css I used.

   .pop
    {
            border:1px solid black ;
            width:500px;
            height:140px;
            background-color: #d1d4d5;
            position:absolute;
            z-index: 1;
            cursor:pointer;
            font-family:calibri;
    }   


  public static native void hello()
 /*-{
        var body=$doc.getElementsByTagName("body")[0];
         var popuptext=$doc.createTextNode(".......");
         popup.className="pop";
         popup.appendChild(popuptext);
 }-*/;           

Answer 1

If you have the calibri font in your system then you've to upload the font on the server and then provide the path in CSS. ofcourse you need different type format so font render perfectly on all browser.

body {
  font-family: 'Calibri', Fallback, sans-serif;
}

@font-face {
  font-family: 'Calibri';
  src: url('Calibri.eot'); /* IE9 Compat Modes */
  src: url('Calibri.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Calibri.woff') format('woff'), /* Modern Browsers */
       url('Calibri.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Calibri.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 2

Use @font-face for your css.

@font-face {
 font-family: "Calibri";
 src: url("url of font file");
}