font effect not applied

Question

@font-face {
    font-family: 'sakal_marathinormal';
    src: url('sakal_marathi_normal-webfont.woff2') format('woff2'),
         url('sakal_marathi_normal-webfont.woff') format('woff'),
         url('Sakal_Marathi_Normal.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

body{
    font-family: sakal marathi;
}

hello i want to use the above font style in my project. i had written the same code in style.css file.the font is located at the same place where my style.css file located.the effect of font is display on my PC because the font is installed on my PC.but when i run my project on another pc the font effect is not displayed.

Answer 1

The implemented font-family has to be the same as the declared font-family within @font-face. Check the example below:

@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}

Answer 2

1. yes..font effect only in your system.
2. Because css run from local machine,not from server. better use with some link of the google fonts

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body{
font-family: 'Indie Flower', cursive;/* for test*/
}

Hello World..!

Answer 3

Please try like this

@font-face {
font-family: sakal_marathinormal;
src: url('sakal_marathi_normal-webfont.woff2') format('woff2'),
     url('sakal_marathi_normal-webfont.woff') format('woff'),
     url('Sakal_Marathi_Normal.ttf') format('ttf');
font-weight: normal;
font-style: normal;

}

body{
font-family: sakal_marathinormal;

}