0

I downloaded font from google fonts website but font family is not working after coding as mentioned below is there anyone who can help me out... My Font is located inside "project_dir/fonts/Opensand-Bold.ttf"... and css file is in "project_dir/css/style.css"

and below is my css code...

@font-face{
   font-family: 'myFont';
   src: url('../fonts/Opensand-Bold.ttf');
}
h1{
   font-family: 'myFont';
}

And below is my hthl file in "public_dir/page.html"

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
    <h1>This is heading text </h1>
    <p>This is paragraph text </p>
</body>
</html>

not working....

manoj03h
  • 37
  • 7
  • Possible duplicate of [How to add some non-standard font to a website?](https://stackoverflow.com/a/22738998/2008111) please read all answers. Maybe `.ttf` is not enough and you need to add more extensions of the font. Maybe just the path is wrong. – caramba May 20 '18 at 11:30

1 Answers1

1

You used just .ttf format. It doesnt work all browsers. Maybe it is not compatible with your browser. Use other formats too.

@font-face {

  font-family: 'MyWebFont';

     src: url('webfont.eot'); /* IE9 Compat Modes */

      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('webfont.woff') format('woff'), /* Modern Browsers */

       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */

       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

}

After you checked this code could you tell me the result. Is that helpfull

N.A
  • 28
  • 3