My browser does not display this font correctly

Question

I would like to use this code in Google Sites to use my font. Why isn't this working? My browser displays it as Times New Roman.

          @font-face {font-family: Johnston ITC; src: url('https://www.servizi.pcngroup.ch/johnston_light/johnstonitclight.ttf');} 
          h1 {
             font-family: Johnston_ITC
          }

          <h1>Hey, June</h1>

Some suggestions?

score 1 · Answer 1 · answered Aug 07 '19 at 16:58

1

Try this:

font-family: 'Johnston_ITC', sans-serif;

answered Aug 07 '19 at 16:58

Zachary McGee

504
1
4
16

Berta Nicolau · Answer 2 · 2019-08-07T17:11:03.397

0

You have errors in your code. Try this:

@font-face {font-family: "Johnston ITC"; src: url('https://www.servizi.pcngroup.ch/johnston_light/johnstonitclight.ttf');} 
h1 { font-family: "Johnston ITC" }

you are calling the font "Johnston_ITC" and you have declared it as "Johnston ITC". And you've also forgotten the quotes.

edited Aug 07 '19 at 17:11

answered Aug 07 '19 at 16:58

Berta Nicolau

128
1
8

score 0 · Answer 3 · answered Aug 07 '19 at 16:59

Here you go. This src works correctly

<html>
   <head>
    <style>
        @font-face {font-family: "Johnston ITC";
            src: url("//db.onlinewebfonts.com/t/9e4ee8bdd2b9e501b34e033920bdf36d.eot");
            src: url("//db.onlinewebfonts.com/t/9e4ee8bdd2b9e501b34e033920bdf36d.eot?#iefix") format("embedded-opentype"),
            url("//db.onlinewebfonts.com/t/9e4ee8bdd2b9e501b34e033920bdf36d.woff2") format("woff2"),
            url("//db.onlinewebfonts.com/t/9e4ee8bdd2b9e501b34e033920bdf36d.woff") format("woff"),
            url("//db.onlinewebfonts.com/t/9e4ee8bdd2b9e501b34e033920bdf36d.ttf") format("truetype"),
            url("//db.onlinewebfonts.com/t/9e4ee8bdd2b9e501b34e033920bdf36d.svg#Johnston ITC Std") format("svg");
        }
      h1 {
         font-family: "Johnston ITC"
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

Shown here

My browser does not display this font correctly

3 Answers3