0

I am creating a website in which there are 2 radio buttons for languages English and Hindi,I need to change the font of textboxes depending upon the selected radio button.For English,things work alright,but for Hindi the website works only if Shivaji05 font is installed on the client computer.I have tried a few things.For systems that do not have Shivaji05 font,I have provided a download link http://hindi-fonts.com/fonts/download/Shivaji05,the font gets downloaded but is not installed therefore even this trial did not succeed.Can someone suggest how one can install a font on the client pc or is there any other way of achieving what I want in this case?

TVicky
  • 353
  • 3
  • 13
  • 36

1 Answers1

3

You should add the following to your css file:

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

or 

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

reference from W3c

refernece

Community
  • 1
  • 1
Adel
  • 1,468
  • 15
  • 18
  • Thank you Adel Assi this works, but still it requires me to close the website and run it again to get the font displayed. – TVicky May 21 '14 at 13:27
  • This can be solve by refresh css file by giving version, please try the following: < link rel="stylesheet" type="text/css" href="mystyle.css?version={NewVersionOnRequierd}"> look to my answer to clear the cache from here http://stackoverflow.com/questions/23734005/force-browser-to-ignore-cache/23734116#23734116 – Adel May 21 '14 at 13:30